在vue中，想要改变自己新增的一个属性值，但数据改变了，视图没有发生改变

最新推荐文章于 2021-11-29 11:18:16 发布

原创最新推荐文章于 2021-11-29 11:18:16 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue中数据改变视图不变 #vue中数据改变视图没有变化 #data中的数据改变视图没有变

vue精选专栏收录该内容

18 篇文章

订阅专栏

本文探讨了在Vue.js中，如何正确地添加和更新动态属性以确保视图能够响应变化。通过实例演示了直接修改对象属性与使用Vue.set方法的区别，以及这两种方法在实际开发中的应用。

举个常见的栗子：展开和关闭。在数据请求到数据后，新增展开和关闭的一个开关属性 flag
我的数据结构：

obj:{
	arr:[
		{
			id: 1,
			content:''
		},{
			id: 2,
			content:''
		}
	]
}

<span class="pointer" v-if="item.flag" @click="switchOpen(item, false)">收起评论</span>
<span class="pointer" v-else @click="switchOpen(item, true)">展开评论</span>

一开始：

数据请求后新增属性：

async getFAQTitleApprovedDetail() {
      const res = await getFAQTitleApprovedDetail(this.FAQTitleApprovedDetail)
      this.obj = res.data
      this.obj.answers.map(item => { item.flag = false })
},
switchOpen(item, val) {
      item.flag = val
},

然后点击后，值改变了，但是上面的dom没有改变，一直是展开评论。

在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

后来：

方法一：（先做处理，再赋值）

async getFAQTitleApprovedDetail() {
      const res = await getFAQTitleApprovedDetail(this.FAQTitleApprovedDetail)
      res.data.answers.map(item => { item.flag = false })
      this.obj = res.data
},
switchOpen(item, val) {
      item.flag = val
},

方法二：（使用 this.$set 赋值）

async getFAQTitleApprovedDetail() {
      const res = await getFAQTitleApprovedDetail(this.FAQTitleApprovedDetail)
      this.approvedDetailObj = res.data
      this.approvedDetailObj.answers.forEach(item => {
        this.$set(item, 'flag', false)
      })
},
switchOpen(item, val) {
      item.flag = val
},