VUE動態加載picker下拉框

例如：后台加載的字段為

[{"LOCATION_TYPE":"LW0501","LOCATION_DESC":"成品倉5樓5-1成品呆滯倉"},{"LOCATION_TYPE":"LW0502","LOCATION_DESC":"成品倉5樓5-2成品備貨倉"},{"LOCATION_TYPE":"LW0503","LOCATION_DESC":"成品倉5樓5-3惠州電芯倉"},{"LOCATION_TYPE":"LW0504","LOCATION_DESC":"成品倉5樓5-4極片倉"},{"LOCATION_TYPE":"LW0505","LOCATION_DESC":"成品倉5樓5-5提庫返工倉"}]

直接貼代碼：

<template>
    <view class="picker-border">
        <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" mode="selector" :value="index" :range="locationArray" :range-key="'LOCATION_DESC'">
                        <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
                console.log(this.locationArray[this.index].LOCATION_TYPE)
            },
            // 獲取倉庫信息
            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[0])
                        }
                    },
                    fail:(err)=>{
                        uni.showModal({
                            title: '錯誤',
                            content: '獲取倉庫信息失敗！'+err,
                            showCancel:false
                        });
                    }
                });
            },
            onLoad() {
                this.getLocation()
            }
        }
    }
</script>

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

最終頁面：