美文网首页Web前端之路
vue this.$set 给data对象新增属性,并触发视图更

vue this.$set 给data对象新增属性,并触发视图更

作者: 竿牍 | 来源:发表于2019-08-15 15:32 被阅读14次

往响应式对象this.$data中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 .

data () {
    return {
        user: {
            name: '',
            id: ''
        }
    }
}

如果直接给user增加属性

this.user.age = 30

虽然user的属性值age的值为30,但是页面上的视图是不发生任何刷新的,只能展示name/id的值,age值还是为空。

原因:由于Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

此时要解决上述问题,给对象添加属性的时候,页面视图跟着刷新,可以用set的方法:

this.$set(this.user, "age", 30)

我在项目中遇到问题是数组的每一项都要动态添加响应式属性,我这样写也是有效果的:

for (let plan of this.formPayment.planList) {
              this.$set(plan, 'socialInsuranceRanges', [{value: '1', label: '有', code: '', price: ''}, {value: '2', label: '无', code: '', price: ''}]);
            }

还有一种情况是给已有对象添加多个属性,可能会用到Object.assgin(),这种情况,应该用两个对象创建一个新对象

不要这样写:

Object.assign( this.user, {
  tel: 18888888888,
  sex: 'Y'
})

而应该这样写:

this.user = Object.assign( {}, this.user, {
  tel: 18888888888,
  sex: 'Y'
})

相关文章

  • vue this.$set 给data对象新增属性,并触发视图更

    往响应式对象this.$data中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式...

  • bug本

    1,双向绑定失效 接口返回数据后如果对data中的数据进行赋值,再给这个对象新增属性时要通过this.$set()...

  • vue新增属性

    vue中对象新增属性的方法比较好用的方法 this.$set(this.dataname,"key", value...

  • Vue.js入门(四):常用API

    1 数据类API Vue.set 向响应式对象中添加一个 属性,并确保这个新 属性 同样是响应式的,且触发视图更新...

  • Vue.set(1)

    对象 this.$set(obj,' 属性',属性值) 是对这个对象属性的新增或修改。记住不是补充。注意2 这...

  • vue强制更新

    使用update this.$forceUpdate(),强制视图更新 用vue.set this.$set(th...

  • Vue 监听不到属性变化

    1、通过vue的this.$set(object,key,value)方法,这种只能监听到新增对象,如果更新对象,...

  • Vue.set和Vue数据监测

    Vue.set this.$set(this.student,'添加的属性','添加的属性值') Vue数据监测 ...

  • 深入理解Vue的数据响应式

    【目录】一、Vue对data做了什么?二、数据响应式三、Vue.set和this.$set 【正文】在学习Vue的...

  • Vue给对象新增属性响应视图

    受现代 JavaScript 的限制,Vue 不能检测到对象属性的添加或删除。 Vue 初始化实例时会对属性执行 ...

网友评论

    本文标题:vue this.$set 给data对象新增属性,并触发视图更

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