element-ui 计数器的坑

<tr class="td" v-for="(item, index) in tableData" :key="index" style="border-bottom:1px solid red;">
      <td>
         <div class="flex-end mr40" v-if="(item.goodsNum - item.inputNum) == 0.000">已全部入库</div>
        <div class="flex-end mr20" v-else><el-input-number v-model="item.goodNum" size="small" @change="handleChange(item)" :min="0" :max="maxNum" label="描述文字"></el-input-number></div>
     </td>
</tr>

我想要回显后台返回的值，代码如下：

this.tableData.forEach(item => {
     return item.goodNum = item.goodsNum - item.inputNum
})  //  结果发现计时器有bug   点击两次之后失效了

修改后：

this.tableData.map(item => {
     this.$set(item,'goodNum',item.goodsNum - item.inputNum)
})

设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开Vue不能检测属性被添加的限制。
也就是说当使用的数据要双向绑定，但发现绑了之后没有效果时候就用这个API
在vue实例中使用的写法: this.$set(要绑定值的对象,绑定的键,绑定的值)