背景:每扫一个二维码 会在weightList数组里面添加一个对象 ,其中对象中的一个属性值和input输入框 进行双向绑定。在输入框输入的时候,每输入一次,输入框就自动失去焦点了
错误代码如下:
<view v-for="(item, i) in weightList" :key="item"> <view class="bywin-column"> <view class="title"> <text>总数量</text> <text class="item-required">*</text> </view> <input v-model="item.num" class="bywin-input" placeholder="请输入" type="number" @input="printDigitNum($event, i)" /> <text class="bywin-input" style="flex: 0 0 10%">件</text> </view> </view>
printDigitNum(e, i) {
const value = e && e.detail.value;
this.$nextTick(() => {
this.weightList = this.weightList.map((v, index) => ({
...v,
num: parseInt(i) === parseInt(index) ? parseInt(value) : v.num,
}));
});
},
问题原有:
问题是有:key="item"引起,input数据绑定后进行模型更新后,view的属性要刷新,进行渲染后就重新刷新的input。如果你是要在代码中找view,可以直接找数组中不变的属性为key值,而不要用子节点绑定的数据给父节点的属性赋值。
解决方案:
<view v-for="(item, i) in weightList" :key="'weightList'+i">