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

 

 

 

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐