多個element-ui 計數器的坑

在列表中渲染多個值，後臺並無返回計數器的默認值的狀況。

也就是要給渲染的數組手動添加一個默認值: 如v.num

可是這樣添加只能更改值一次，而且值還不對

<el-table-column label="盤點數量">
  <template slot-scope="scope">
    <el-input-number size="mini" :min="0" :max="10" v-model="scope.row.num" @change='getVal'></el-input-number>
  </template>
</el-table-column>
複製代碼

• js

this.puhuoPartsDetail.map(v => {
    v.num = 0;
});
複製代碼

• 這樣寫沒法達成想要的效果
• 必須使用this.$set(v,'num',0)

//正確方式
this.puhuoPartsDetail.map(v => {
    this.$set(v,'num',0)
});
複製代碼

Vue.set

設置對象的屬性。若是對象是響應式的，確保屬性被建立後也是響應式的，同時觸發視圖更新。這個方法主要用於避開Vue不能檢測屬性被添加的限制。

也就是說當使用的數據要雙向綁定，但發現綁了以後沒有效果時候就用這個API

在vue實例中使用的寫法: this.$set(要綁定值的對象,綁定的鍵,綁定的值)

參考