问题描述
Vue的data使用有坑啊，它不能直接修改创建的对象的属性，例如想要给 user 添加一个 name 属性，值是 Jay 。
先来一个添加的错误示例(这是一个大坑，请注意)，这样写页面不渲染，但是属性添加到了user对象，所以不会报错。
Java
mounted() { this.user.name='Jay'; } //错误示例
1
mounted(){this.user.name='Jay';}//错误示例
作为一个后端开发，被这个问题困扰了一下午，-_-||
下面介绍几种正确有效的写法
解决方法一
强制刷新数据。 这里用了 $forceUpdate() ，它可以强制刷新数据。
mounted() {
this.user.name='Jay';
this.$forceUpdate();
} //正确示例
1
2
3
4
mounted(){
this.user.name='Jay';
this.$forceUpdate();
}//正确示例
解决方法二
重写整个对象。因为在 data 里面创建了 user 对象，可以直接修改它，缺点是得重写整个对象。
mounted() {
this.user={
Age:25,
name:'Jay'
}
} //正确示例
1
2
3
4
5
6
mounted(){
this.user={
Age:25,
name:'Jay'
}
}//正确示例
解决方法三
重要知识点。Vue.set 方法。用于设置对象的属性，它可以解决 Vue 无法检测添加属性的限制，语法格式如下：
Vue.set( target, key, value )
1
Vue.set(target,key,value)
参数说明
target: 可以是对象或数组
key : 可以是字符串或数字
value: 可以是任何类型
使用代码示例
new Vue({
el: '#app',
data:{
a:{b:1}
},
mounted() {
this.$set(this.a, 'bb', 121);
}
})
1
2
3
4
5
6
7
8
9
newVue({
el:'#app',
data:{
a:{b:1}
},
mounted(){
this.$set(this.a,'bb',121);
}
})
在Vue中，一般只有在data选项中声明的属性(或者是属性的属性)才是具有响应特性的。如果需要在data选项之外对已有属性添加(Vue 不允许动态添加根级响应式属性)具有响应特性的属性，需要用到Vue的set方法。
var vm = new Vue({
data: {
a: { //a就是根级属性，不可动态添加
b: 0 //b就是属性的属性，可以动态添加
}
}
})何为响应特性？就是当我们更改data中的值的时候，HTML与之绑定的部分会随之更新的特性。
1
2
3
4
5
6
7
varvm=newVue({
data:{
a:{//a就是根级属性，不可动态添加
b:0//b就是属性的属性，可以动态添加
}
}
})何为响应特性？就是当我们更改data中的值的时候，HTML与之绑定的部分会随之更新的特性。
Vue文档中的例子
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
1
2
3
4
5
6
7
8
varvm=newVue({
data:{
a:1
}
})
// `vm.a` 现在是响应式的
vm.b=2
// `vm.b` 不是响应式的
上例中的a就是在data中声明的具有响应特性的属性，而b就不是。
把上面的例子修改一下
var vm = new Vue({
data: {
a: {
a1:''
}
},
methods: {
change: function () {
this.a.a1 = "test" //a1就是响应式的
this.a.a2 = "testtest" //a2就不是响应式的
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
varvm=newVue({
data:{
a:{
a1:''
}
},
methods:{
change:function(){
this.a.a1="test"//a1就是响应式的
this.a.a2="testtest"//a2就不是响应式的
}
}
})
在实际操作中，上例的a2虽然不是响应式的，但他却是可以在HTML部分被渲染更新出来。这里就是一个比较容易掉进去的坑了。由于Vue是异步执行DOM更新，虽然更新的动作是由this.a.a1 = “test”触发，可动作的完成是在this.a.a2 = “testtest”之后。
总结
最后我是用this.$set(this.a, ‘bb’, 121);这种方法来解决页面data属性没刷新的问题。
浏览量:
53
0
