uniapp Wechat applet Picker drop-down list data echo problem

Renderings:
insert image description here

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].dictValue
	this.brandame  = this.brandList[this.brandIndex].dictLabel
},
//接口返回数据,数据回显
getInfo: function() {
    
    
	uni.showLoading();
		var params = {
    
    
			url: "/***/***",
			method: "GET",
			data: {
    
    },
			callBack: res=> {
    
    
				uni.hideLoading()
				if(res.data){
    
    
					//返回的已选品牌id
					this.brandIds = res.data.brand
					//遍历品牌列表数据,对应id,从而对应选项
					this.brandList.forEach((item,bindex)=>{
    
    
						if(item.dictValue == res.data.brand){
    
    
							this.brandIndex = bindex;
						}
					})
				}
			}
		};
		http.request(params);
},

Guess you like

Origin blog.csdn.net/maoge_666/article/details/131845659