Vue赋值不会触发视图更新?使用$set()给data对象新增属性,并触发视图更新

    选择打赏方式

本站已不再更新,最新资源请前往zcjun.com获取!

data () {
    return {
        zcjun: {
            name: '',
            sex: ''
        }
    }
}


给 zcjun对象新增 age 属性,直接给zcjun赋值操作,虽然可以新增属性,但是不会触发视图更新

mounted () {
    this.zcjun.age = 24
}

原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。
要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。

正确写法:this.$set(this.data,”key”,value’)

mounted () {
    this.$set(this.zcjun,"age", 24)
}


版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:Vue赋值不会触发视图更新?使用$set()给data对象新增属性,并触发视图更新 https://old.zcjun.com/learn/541.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!