uniapp 微信小程序 Picker下拉列表数据回显问题

效果图：
在这里插入图片描述

1、template

<template><view class="items select-box"><view class="items-text">品牌型号</view><picker @change="bindBrandType" :value="brandIndex" :range="brandList" range-key="dictLabel"class="picker-box"><input class="select-input" type="text" placeholder="请选择品牌型号" v-if="brandIndex == -1"disabled="disabled"></input><view v-else class="select-input" :value="brandList[brandIndex].dictLabel">{{brandList[brandIndex].dictLabel}}</view></picker><!-- 下拉角标图片 --><view class="icon-img"><image src="../../static/img/select-icon.png"></image></view></view>
</template>

2、data

data() {return {//为效果展示，暂且brandList 的数据在data内写死brandList: [{"dictLabel": "沃尔沃","dictValue": "1"}, {"dictLabel": "东风","dictValue": "2"}, {"dictLabel": "红旗","dictValue": "3"}, {"dictLabel": "解放","dictValue": "4"}, {"dictLabel": "宝马","dictValue": "5"}, {"dictLabel": "奥迪","dictValue": "6"}, {"dictLabel": "哈弗","dictValue": "7"}],brandIndex: -1,brandIds: '',brandame: '',}
}
onLoad: function(options) {this.getBrandList()//通过接口获取品牌列表数据
}

3、methods

//获取品牌型号列表
getBrandList: function() {uni.showLoading();var params = {url: "/***/***",method: "GET",data: {},callBack: res => {uni.hideLoading()this.brandList = res.data//为效果展示，暂且brandList 的数据在data内写死，项目中按接口返回的数据}};http.request(params);
},
//选择品牌型号
bindBrandType(e) {this.brandIndex = e.detail.value//往后端传值传所选的brandIds this.brandIds = this.brandList[this.brandIndex].dictValuethis.brandame  = this.brandList[this.brandIndex].dictLabel
},
//接口返回数据，数据回显
getInfo: function() {uni.showLoading();var params = {url: "/***/***",method: "GET",data: {},callBack: res=> {uni.hideLoading()if(res.data){//返回的已选品牌idthis.brandIds = res.data.brand//遍历品牌列表数据，对应id,从而对应选项this.brandList.forEach((item,bindex)=>{if(item.dictValue == res.data.brand){this.brandIndex = bindex;}})}}};http.request(params);
},