问题描述

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