解决Vue数据更新但视图不更新的问题

nunumaymax

已于 2022-07-06 15:58:24 修改

阅读量2.8k

点赞数 2

分类专栏： vue2 文章标签： vue.js 前端

于 2021-12-23 23:07:15 首次发布

原文链接：https://www.jianshu.com/p/cd3685a8367c

版权

vue2 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

vue中改变数据视图不更新

在开发中我们处理数据时会遇到数据更新了，但视图并没有更新，这种情况往往是数据嵌套层数过多导致的问题，下面给大家提供一种解决办法。

data () {
  return {
    obj: {
       item1: {
            arr:['苹果', '香蕉', '梨子', '猕猴桃']
          },
       item2: {
            arr:['火龙果', '水蜜桃', '百香果', '脆枣']
          },
       item3: {
          text1: '这个世界如梦如幻，所见皆为幻象。',
          text2: '若了境如幻自心所现，则灭妄想三有苦及无知爱业缘。 ',
          text3: '醒来吧，梦中的你。'
         }
    }
  }
},
methods: { 
  change () {
  	 // 例如要改变obj对象中item1里的arr的"梨子"为"柚子"
  	 // 传参依次为 1.需要修改的数组 2. 需要修改的数据的索引 3.新的值
     this.$set(obj.item1.arr, 2, '柚子') 
     
     // 传参依次为 1.需要修改的对象 2. 需要修改的对象的key 3.新的值
  	 // 例如要改变obj对象中item3的text3的内容
     this.$set(obj.item3, 'text3', '我已经觉醒了。')  
     
  	 // 例如要给item3新增一个text4
     this.$set(obj.item3, 'text4', '我已经觉醒了，但你还在梦中。')
  }
}