vue初始化出現undefined的問題

1、使用vue初始化下拉列表的時候，需要動態獲取數據庫的列表數據，因此在初始化的時候需要異步加載數據。但是往往會報undefined的錯。因為渲染在異步加載之前，導致渲染的時候還沒有獲取到相對於的數據，導致報undefined的錯誤。

 

 處理辦法就是初始化的時候加一個判斷即可。

附上代碼：（加了一個v-if="locationArray!=''"的判斷）

<template>
    <view class="picker-border">
        <view class="uni-title uni-common-pl">請選擇倉庫</view>
        <view class="uni-list">
            <view class="uni-list-cell">
                <view class="uni-list-cell-left">
                    當前倉庫
                </view>
                <view class="uni-list-cell-db" v-if="locationArray!=''">
                    <picker @change="bindPickerChange" :value="index" :range="locationArray">
                        <view class="uni-input">{{locationArray[index].LOCATION_DESC}}</view>
                    </picker>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                index: 0,
                locationArray:''
            }
        },
        methods:{
            bindPickerChange: function(e) {
                console.log('picker發送選擇改變，攜帶值為', e.target.value)
                this.index = e.target.value
            },
            // 獲取倉庫信息
            getLocation(){
                uni.request({
                    url: this.$common.url+"LoginApi/getLocation", 
                    data: {},
                    success: (res) => {
                        if(res.data.status==false){
                            uni.showModal({
                                title: '錯誤',
                                content: res.data.errMessage,
                                showCancel:false
                            });
                        }else{
                            this.locationArray=res.data;
                            console.log(this.locationArray)
                        }
                    },
                    fail:(err)=>{
                        uni.showModal({
                            title: '錯誤',
                            content: '獲取倉庫信息失敗！'+err,
                            showCancel:false
                        });
                    }
                });
            },
            onLoad() {
                this.getLocation()
            }
        }
    }
</script>

<style>
    .picker-border{
        border: 1rpx #0A98D5 solid;
    }
</style>

參考：https://www.cnblogs.com/huancheng/p/9188287.html