多個element-ui 計數器的坑

kear發表於2018-03-07
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(要繫結值的物件,繫結的鍵,繫結的值)

參考

相關文章