vue列表數(shù)據(jù)發(fā)生變化指令沒有更新問題及解決方法
問題描述，在vue的for循環(huán)中使用了指令，然后對(duì)數(shù)據(jù)進(jìn)行篩選的時(shí)候，發(fā)現(xiàn)指令沒有起作用。
如圖前面的圖標(biāo)是根據(jù)文件名的后綴名，返回響應(yīng)圖標(biāo)的，通過指令實(shí)現(xiàn)的。然后我們?cè)谒阉骺蛑袆h選以后，數(shù)據(jù)更新了，但是圖標(biāo)沒有更新
分析原因
<div v-for="(item, index) in myDate" :key='index'> ... </div>
問題就出在了:key='index'因?yàn)関ue中for循環(huán)是根據(jù)key的值的變化來更新vnode的，很顯然我們經(jīng)過篩選如果刪選出三條數(shù)據(jù)，那么index = 0, 1, 2沒有變化，所以vnode沒有更新
解決辦法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ā)生變化指令沒有更新問題及解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
- vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)示例
- vue input輸入框關(guān)鍵字篩選檢索列表數(shù)據(jù)展示
- vue實(shí)現(xiàn)前臺(tái)列表數(shù)據(jù)過濾搜索、分頁效果
- 使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例
- vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例
- 淺析vue中常見循環(huán)遍歷指令的使用 v-for
- 解決vue組件中使用v-for出現(xiàn)告警問題及v for指令介紹
相關(guān)文章
vue組件 $children,$refs，$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs，$parent的使用詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(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
本文通過實(shí)例代碼給大家介紹了vue仿百度搜索功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-02-02
本文主要介紹了Vue 中頁面?zhèn)髦档亩喾N方式小結(jié),主要包括路由傳參、Vuex 狀態(tài)管理、Props 屬性和事件傳遞數(shù)據(jù)這幾種,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
vue3如何使用watch監(jiān)聽props中的數(shù)據(jù)
在vue項(xiàng)目中,父子組件數(shù)據(jù)傳遞是最常見的場景,但是今天在開發(fā)過程中父級(jí)數(shù)據(jù)傳遞到子組件,控制子組件的顯隱,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用watch監(jiān)聽props中數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue install 注冊(cè)全局組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽，具名插槽，作用域插槽是vue中常用的三個(gè)插槽，這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
iview form清除校驗(yàn)狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了iview form清除校驗(yàn)狀態(tài)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式
本文通過示例代碼介紹了vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式,通過場景分析介紹了vue3使用組合式api將時(shí)間戳格式轉(zhuǎn)換成時(shí)間格式（2023年09月28日 10:00）,感興趣的朋友一起看看吧2023-12-12