快捷導(dǎo)航

vue列表數(shù)據(jù)發(fā)生變化指令沒(méi)有更新問(wèn)題及解決方法

更新時(shí)間：2020年01月16日 10:24:39 作者：張旭超

這篇文章主要介紹了vue中使用指令，列表數(shù)據(jù)發(fā)生變化指令沒(méi)有更新問(wèn)題，本文給出了解決辦法,需要的朋友可以參考下

問(wèn)題描述，在vue的for循環(huán)中使用了指令，然后對(duì)數(shù)據(jù)進(jìn)行篩選的時(shí)候，發(fā)現(xiàn)指令沒(méi)有起作用。

如圖前面的圖標(biāo)是根據(jù)文件名的后綴名，返回響應(yīng)圖標(biāo)的，通過(guò)指令實(shí)現(xiàn)的。然后我們?cè)谒阉骺蛑袆h選以后，數(shù)據(jù)更新了，但是圖標(biāo)沒(méi)有更新

分析原因

<div v-for="(item, index) in myDate" :key='index'>
...
</div>

問(wèn)題就出在了:key='index'因?yàn)関ue中for循環(huán)是根據(jù)key的值的變化來(lái)更新vnode的，很顯然我們經(jīng)過(guò)篩選如果刪選出三條數(shù)據(jù)，那么index = 0, 1, 2沒(méi)有變化，所以vnode沒(méi)有更新

解決辦法1：我們?cè)O(shè)置:key的時(shí)候最好使用每條數(shù)據(jù)的id這樣就是唯一的，每次篩選，vnode都會(huì)更新。

解決辦法2：在指令中設(shè)置

// 添加bind設(shè)置
bind: function (el, binding, vnode) {
 // bind中的vnode里面的key可以給設(shè)置一個(gè)隨機(jī)數(shù)，這樣每次都會(huì)更新虛擬節(jié)點(diǎn)。
 let num = parseInt(Math.random() * 10)
 vnode.key = num
},
inserted: ...

總結(jié)

以上所述是小編給大家介紹的vue列表數(shù)據(jù)發(fā)生變化指令沒(méi)有更新問(wèn)題及解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

vue組件 $children,$refs，$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs，$parent的使用詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
vuex模塊獲取數(shù)據(jù)及方法的簡(jiǎn)單示例
Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下
2023-03-03
Vue 仿百度搜索功能實(shí)現(xiàn)代碼
本文通過(guò)實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
2017-02-02
Vue 中頁(yè)面?zhèn)髦档亩喾N方式小結(jié)
本文主要介紹了Vue 中頁(yè)面?zhèn)髦档亩喾N方式小結(jié),主要包括路由傳參、Vuex 狀態(tài)管理、Props 屬性和事件傳遞數(shù)據(jù)這幾種,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-10-10
vue3如何使用watch監(jiān)聽(tīng)props中的數(shù)據(jù)
在vue項(xiàng)目中,父子組件數(shù)據(jù)傳遞是最常見(jiàn)的場(chǎng)景,但是今天在開(kāi)發(fā)過(guò)程中父級(jí)數(shù)據(jù)傳遞到子組件,控制子組件的顯隱,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用watch監(jiān)聽(tīng)props中數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue install 注冊(cè)全局組件方式
這篇文章主要介紹了vue install 注冊(cè)全局組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽，具名插槽，作用域插槽是vue中常用的三個(gè)插槽，這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別，感興趣的小伙伴可以了解一下
2023-08-08
vue配置font-awesome5的方法步驟
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
iview form清除校驗(yàn)狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了iview form清除校驗(yàn)狀態(tài)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式
本文通過(guò)示例代碼介紹了vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式,通過(guò)場(chǎng)景分析介紹了vue3使用組合式api將時(shí)間戳格式轉(zhuǎn)換成時(shí)間格式（2023年09月28日 10:00）,感興趣的朋友一起看看吧
2023-12-12