vue中修改了数据但视图无法更新怎么办-创新互联

这篇文章主要为大家展示了“vue中修改了数据但视图无法更新怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中修改了数据但视图无法更新怎么办”这篇文章吧。

10年积累的成都网站建设、成都网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先建设网站后付款的网站建设流程,更有固原免费网站建设让你可以放心的选择与我们合作。

我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况:

1、v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到

数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以

Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)

filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组

Vue 不能检测以下变动的数组:

① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue

② 当你修改数组的长度时,例如: vm.items.length = newLength

话不多说,上代码,并且附上效果图:


  
   
              {{item.name}}-{{index}}      {{item.age}}-{{index}}         
   click   
   

vue中修改了数据但视图无法更新怎么办

vue中修改了数据但视图无法更新怎么办

以上Vue 不能检测数据变动的数组的2种方式解决办法

将代码中的add()方法改为:

add(){
  // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到
  Vue.set(this.gc,0,{name:'lisi',age:22}) //这样就能被vue监控到,更新视图    
 }

vue中修改了数据但视图无法更新怎么办

以上是“vue中修改了数据但视图无法更新怎么办”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享文章:vue中修改了数据但视图无法更新怎么办-创新互联
分享链接:http://myzitong.com/article/esspi.html

其他资讯