多个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(要绑定值的对象,绑定的键,绑定的值)

参考

转载于:https://juejin.im/post/5a9f4944f265da2384401dd9