Vue.js 中遇到的坑坑坑 - 对象如何动态添加属性

先看一下官方说明：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。
项目中，需要更新服务器数据增加一些属性（比如：按钮状态、按钮文案），用来控制一个服的角色，增加后点击视图上一点反应都没有，但是用console.log
打印出来发现值的确的有变化的。
也就是说，数据的变化不能触发视图更新。原因就是如上面所说，因为这个属性是我后来添加的，不能被 Vuejs 检测到。这时候需要使用$set(key, value)这个API。

假如你的数据是这样：

data() {
  return {
    testItems: [
      {
        zServer: "公测001区公测001区"
      }
    ]
  }
}

你需要在一些操作后为testItems里面的每个对象增加一个show属性,则需要这样写：

for( let i = 0 , len = this.testItem.length ; i < len; i++ ) {
    let obj = this.testItem[i];
    obj.ACTOR_NAME = "五杀~";
    obj.ACTOR_BTN = "取消添加";

    this.$set( this.testItem, i, obj );
}