背景:每掃一個二維碼 會在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">