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 );
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容