问题:在实例创建之后添加新的对象,然后新增属性

参考代码:Vue-给对象新增响应式属性(使用Vue.$set()或者Object.assign())

解决:如果你要为一个对象添加一个属性的话,且没有在源对象里面定义这个属性,添加之后是不会监听到的,解决方法:
1.可以在对象中先定义你需要在使用中用到的对象,设置为空
2.使用this.$set(对象,属性,值); 

new Vue({
    el: '#test',
    data() {
        return {
            student: {}
        }
    },
...
mounted() {
    var that = this
    //获取数据
    $.post("localhost/test/list", {"studentId": this.studentId}, function (data) {
        for (let i = 0; i < data.data.length; i++) {
            that.student = {name:"张三", age: "18"}// 改变this.student.name、age的值视图会更新
            that.student.name ="张三"// 改变this.student.name的值  视图不会更新
            Object.assign(this.student, {name: "张三"})// 改变this.student.name的值  视图不会更新
            this.student= Object.assign({}, this.student, {name: "张三"})// 触发视图更新

            that.student = {}
            that.$set(this.student,"name", "张三")//改变this.student.name时 视图会更新
            that.$set(this.student,"age", "18")
            that.$set(this.student,"sex", "男")
         }
     }, "json");
}
...
});

在vue代码中,只要是在data对象里定义的内容(student),赋值后的属性值变化视图实时变化

根据官方文档定义:

  • 如果在实例创建之后添加新的属性到实例上不会触发更新
  • Vue不允许在已创建的实例上动态添加新的根级响应式属性。但可以是使用Vue.set(object,key,value)方法将响应属性添加到嵌套的对象上。

根据上面的定义,student是已创建的实例,name就是新增属性,name不会触发视图更新,如果想触发视图更新,需要使用Vue.$set()方法,既可以新增属性,又可以触发视图更新

vue 中 [__ob__:]这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的。

_ob_同时也表示此数据会随着值改变,vue触发视图更新。

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐