Vue 中给 data 中的对象属性添加一个新的属性时会发生什么如何解决？

轩辕小不懂发布于 2021-12-28 13:57

阅读 616

答案 1

分类：WEB前端开发

Nen 2021-12-28 14:05

- 程序员

<div>

<ul>

<li v-for="value in obj" :key="value"> {{value}} </li>

</ul>

</div>

</template>

export default {

data () {

return {

obj: {

a: 'obj.a'

}

methods: {

addObjB () {

this.obj.b = 'obj.b'

console.log(this.obj)

}

</script>

点击 button 会发现，obj.b 已经成功添加，但是视图并未刷新。这是因为在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局 api $set()：

addObjB () (

this.$set(this.obj, 'b', 'obj.b')

console.log(this.obj)

}

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了。

Vue 中给 data 中的对象属性添加一个新的属性时会发生什么 如何解决？