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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值