vue中修改了數(shù)據(jù)但視圖無法更新怎么辦

發(fā)布時間：2021-06-29 14:29:11 來源：億速云閱讀：186 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“vue中修改了數(shù)據(jù)但視圖無法更新怎么辦”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中修改了數(shù)據(jù)但視圖無法更新怎么辦”這篇文章吧。

我們有時候常碰到vue中明明修改了數(shù)據(jù)，但是視圖無法更新，因此我總結(jié)了一點點碰到此類的情況：

1、v-for遍歷的數(shù)組，當(dāng)數(shù)組內(nèi)容使用的是arr[0].xx =xx更改數(shù)據(jù)，vue無法監(jiān)測到

數(shù)組數(shù)據(jù)變動：我們使用某些方法操作數(shù)組，變動數(shù)據(jù)時，有些方法無法被vue監(jiān)測，有些可以

Vue包裝了數(shù)個數(shù)組操作函數(shù)，使用這些方法操作的數(shù)組去，其數(shù)據(jù)變動時會被vue監(jiān)測：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

vue2.0還增加個方法可以觀測Vue.set(items, indexOfItem, newValue)

filter(), concat(), slice() 。這些不會改變原始數(shù)組，但總是返回一個新數(shù)組。當(dāng)使用非變異方法時，可以用新數(shù)組替換舊數(shù)組

Vue 不能檢測以下變動的數(shù)組：

① 當(dāng)你利用索引直接設(shè)置一個項時，vm.items[indexOfItem] = newValue

② 當(dāng)你修改數(shù)組的長度時，例如： vm.items.length = newLength

話不多說，上代碼,并且附上效果圖：

<body>
  <div id="app">
   <ul>
    <li v-for="(item,index) in gc">
     <span>{{item.name}}-{{index}}</span>
     <span>{{item.age}}-{{index}}</span>
    </li>
   </ul>
   <button @click="add">click</button>
  </div>
  <script>
  new Vue({
   el:'#app',
   data:{
    gc:[
     {name:'zhangsan',age:10},
     {name:'lisi',age:21},
     {name:'wangwu',age:22},
     {name:'wangwu',age:22}
    ]
   },methods:{
    // 當(dāng)點擊事件觸發(fā)時候會修改掉gc[0]的值為lisi,但是視圖不會發(fā)生變化
    add(){
     this.gc[0] ={name:'lisi',age:22} 
    }
   }
  })
  </script> 
</body>

vue中修改了數(shù)據(jù)但視圖無法更新怎么辦

以上Vue 不能檢測數(shù)據(jù)變動的數(shù)組的2種方式解決辦法

將代碼中的add()方法改為:

add(){
  // this.gc[0] ={name:'lisi',age:22} //這樣直接修改不能被vue監(jiān)聽到
  Vue.set(this.gc,0,{name:'lisi',age:22}) //這樣就能被vue監(jiān)控到，更新視圖    
 }

vue中修改了數(shù)據(jù)但視圖無法更新怎么辦

以上是“vue中修改了數(shù)據(jù)但視圖無法更新怎么辦”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

vue中修改了數(shù)據(jù)但視圖無法更新怎么辦

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽