您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“vue修改了數(shù)據(jù)但視圖無法更新怎么解決”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“vue修改了數(shù)據(jù)但視圖無法更新怎么解決”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
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ù)變動的數(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是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
讀到這里,這篇“vue修改了數(shù)據(jù)但視圖無法更新怎么解決”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。