Vue.set()和this.$set()

作者: 前端陈陈陈 | 来源:发表于2020-12-03 15:14 被阅读0次

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。 如下代码,给 student对象新增 age 属性

    data () {
      return {
        student: {
          name: '',
          sex: ''
        }
      }
    }
    mounted () { // ——钩子函数,实例挂载之后
      this.student.age = 1
    }
    

    受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
    正确写法:this.$set(this.data,”key”,value')

    this.$set(this.products_img, indexs, URL.createObjectURL(file.raw));
    

    转自:https://juejin.cn/post/6844903901175496711

    相关文章

      网友评论

        本文标题:Vue.set()和this.$set()

        本文链接:https://www.haomeiwen.com/subject/aovmwktx.html