uni-app循环出来的picker组件绑定值的方法
项目中碰到picker组件是循环出来的,下拉的内容又是对象的时候的问题,这个时候如果picker的绑定值就设成:value="index"的话,就会出现选择一个,其他的picker全部改变的情况,后来花了一天时间摸索,终于实现了改变任意一个picker的值,其他不受影响的功能;上代码:首先是前端代码:<view v-for="(item,i) in listData" :key="i" cl
·
项目中碰到picker组件是循环出来的,下拉的内容又是对象的时候的问题,这个时候如果picker的绑定值就设成:value="index"的话,就会出现选择一个,其他的picker全部改变的情况,后来花了一天时间摸索,终于实现了改变任意一个picker的值,其他不受影响的功能;
上代码:
首先是前端代码:
<view v-for="(item,i) in listData" :key="i" class="v3-v1" style="display: flex;margin: 0upx 40upx 40upx 40upx;border: 2upx solid #BBBBBB;border-radius: 10upx;padding: 16upx;">
<view style="display: flex;margin: 0 auto;">
<view style="width: 40%;height: 40upx;line-height: 40upx;">Product: </view>
<view>
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-db picker">
<picker @change="bindPickerChange2(i,$event)" range-key="v" :value="k_for_a2[i]" :range="array2">
<view class="uni-input">{{ array2[k_for_a2[i]]['v'] }}</view>
</picker>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
data() {
return {
listData : [],
array2:[{'id': 0,v : '?'}],
k_for_a2 : [],
};
},
array2就是自己的下拉数据,可以自己从后端获取;
k_for_a2是专门放下拉内容索引值的数组,在查询数据的时候把k_for_a2填入数据,默认为0:
if(res.data.error_code=='0'){
this.listData=res.data.data.unbind_nozzle_list
this.listData.forEach((item,k)=>{
item.NozzleID=0
item.ProductSN=0
this.k_for_a2.push(0)
})
}
每个下拉的value绑定的是对应索引的k_for_a2的值,例如第一个下拉内容的索引值就是k_for_a2[0];
chang事件触发的方法:
bindPickerChange2(i,e) {
//Vue数据不会更新时,手动更新数据
this.$set(this.k_for_a2, i, e.target.value)
this.listData[i].ProductSN=this.array2[this.k_for_a2[i]].id
},
OK,效果达到:
其中最难理解的是这句代码:
this.$set(this.k_for_a2, i, e.target.value)
可能有些人会觉得直接写成:
this.k_for_a2[i]=e.targer.value
不就好了吗?
我当时也是这么觉得,但是如果写成上面的代码,那么下拉选择后,uni-input里的内容是不会更新的。具体原因我就不详细说了,可以参考https://blog.csdn.net/qq_38705449/article/details/103525613
更多推荐
已为社区贡献3条内容
所有评论(0)