记vue修改数组属性，dom不发生变化的问题

目录：

目录

• 目录：
• 开篇
• 正确的姿势
• 为什么
• $set

开篇

今天在写vue的时候，出现了一个以前可能没遇到的问题。我利用一个数组记录列表下按钮的启用、禁用状态，但我点击某个列表项按钮后，会修改当前数组里面的状态值使其解除禁用状态，我一开始的代码写的是：

<tr :key="index" v-for="(device,index) in devices">
  <td>
    <button type="button" class="btn btn-success btn-sm btn-block mb10" @click="connectTsc(index, device.address)">连接</button>
    <button type="button" class="btn btn-danger btn-sm btn-block mb10" :disabled="allowPrintDevices[index]" @click="disConnectTsc()">断开</button>
    <button type="button" class="btn btn-primary btn-sm btn-block mb10" :disabled="allowPrintDevices[index]" @click="printText(index, device.address)">打印文字</button>
  </td>
</tr>

    this.allowPrintDevices[index] = false

这样是不会成功的。

正确的姿势

    this.$set(this.allowPrintDevices, deviceIndex, false)

为什么

当vue中改变对象元素的情况下，不会重新渲染dom元素，这时候可以用vue的$set方法。

一般情况下就可以实现功能了，也就是改变对象元素后，会重新渲染dom，如果当你使用挺好this.$set方法是，发现并不管用，那么应该就是你改变的对象层级太深了，没有办法触发reader函数，需要自己手动触发一下、

    this.$forceUpdate()
    // 举例
    this.$set(this.data[id],"status",true)

$set

官方：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新

参考文献：Vue-给对象新增属性（使用Vue.$set()）、深入响应式原理