解決vue中修改了數據但視圖無法更新的情況

來源：懂視網責編：小采時間：2020-11-27 22:09:16

解決vue中修改了數據但視圖無法更新的情況

解決vue中修改了數據但視圖無法更新的情況:我們有時候常碰到vue中明明修改了數據，但是視圖無法更新，因此我總結了一點點碰到此類的情況： 1、v-for遍歷的數組，當數組內容使用的是arr[0].xx =xx更改數據，vue無法監測到數組數據變動：我們使用某些方法操作數組，變動數據時，有些方法無法被vue監

推薦度：

點擊下載本文 文檔為doc格式

導讀解決vue中修改了數據但視圖無法更新的情況:我們有時候常碰到vue中明明修改了數據，但是視圖無法更新，因此我總結了一點點碰到此類的情況： 1、v-for遍歷的數組，當數組內容使用的是arr[0].xx =xx更改數據，vue無法監測到數組數據變動：我們使用某些方法操作數組，變動數據時，有些方法無法被vue監

我們有時候常碰到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

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

<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:{
 // 當點擊事件觸發時候會修改掉gc[0]的值為lisi,但是視圖不會發生變化
 add(){
 this.gc[0] ={name:'lisi',age:22} 
 }
 }
 })
 </script> 
</body>

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

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

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

以上這篇解決vue中修改了數據但視圖無法更新的情況就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

解決vue中修改了數據但視圖無法更新的情況

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 的情況更改數據

熱門焦點

解決vue中修改了數據但視圖無法更新的情況

解決vue中修改了數據但視圖無法更新的情況

解決vue中修改了數據但視圖無法更新的情況

最新推薦

猜你喜歡

熱門推薦