uni-app循环出来的picker组件绑定值的方法

项目中碰到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