2022-09-08 vue给对象新增属性
解决:如果你要为一个对象添加一个属性的话,且没有在源对象里面定义这个属性,添加之后是不会。在vue代码中,只要是在data对象里定义的内容(student),1.可以在对象中先定义你需要在使用中用到的对象,设置为空。2.使用this.$set(对象,属性,值);问题:在实例创建之后添加新的对象,然后新增属性。但是我们在对象(student)上。值会变化,但是视图不会实时变化。使用Vue.$set(
·
问题:在实例创建之后添加新的对象,然后新增属性
参考代码: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触发视图更新。
更多推荐
已为社区贡献3条内容
所有评论(0)