vue列表數(shù)據(jù)發(fā)生變化指令沒有更新問題及解決方法
更新時間：2020年01月16日 10:24:39 作者：張旭超
這篇文章主要介紹了vue中使用指令，列表數(shù)據(jù)發(fā)生變化指令沒有更新問題，本文給出了解決辦法,需要的朋友可以參考下
問題描述，在vue的for循環(huán)中使用了指令，然后對數(shù)據(jù)進(jìn)行篩選的時候，發(fā)現(xiàn)指令沒有起作用。
如圖前面的圖標(biāo)是根據(jù)文件名的后綴名，返回響應(yīng)圖標(biāo)的，通過指令實現(xiàn)的。然后我們在搜索框中刪選以后，數(shù)據(jù)更新了，但是圖標(biāo)沒有更新
分析原因
<div v-for="(item, index) in myDate" :key='index'> ... </div>
問題就出在了:key='index'因為vue中for循環(huán)是根據(jù)key的值的變化來更新vnode的，很顯然我們經(jīng)過篩選如果刪選出三條數(shù)據(jù)，那么index = 0, 1, 2沒有變化，所以vnode沒有更新
解決辦法1：我們設(shè)置:key的時候最好使用每條數(shù)據(jù)的id這樣就是唯一的，每次篩選，vnode都會更新。
解決辦法2：在指令中設(shè)置
// 添加bind設(shè)置
bind: function (el, binding, vnode) {
// bind中的vnode里面的key可以給設(shè)置一個隨機(jī)數(shù)，這樣每次都會更新虛擬節(jié)點。
let num = parseInt(Math.random() * 10)
vnode.key = num
},
inserted: ...
總結(jié)
以上所述是小編給大家介紹的vue列表數(shù)據(jù)發(fā)生變化指令沒有更新問題及解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue組件 $children,$refs，$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs，$parent的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下2023-03-03
本文通過實例代碼給大家介紹了vue仿百度搜索功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-02-02
本文主要介紹了Vue 中頁面?zhèn)髦档亩喾N方式小結(jié),主要包括路由傳參、Vuex 狀態(tài)管理、Props 屬性和事件傳遞數(shù)據(jù)這幾種,具有一定的參考價值,感興趣的可以了解一下2023-10-10
vue3如何使用watch監(jiān)聽props中的數(shù)據(jù)
在vue項目中,父子組件數(shù)據(jù)傳遞是最常見的場景,但是今天在開發(fā)過程中父級數(shù)據(jù)傳遞到子組件,控制子組件的顯隱,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用watch監(jiān)聽props中數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue install 注冊全局組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽，具名插槽，作用域插槽是vue中常用的三個插槽，這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了vue配置font-awesome5的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
iview form清除校驗狀態(tài)的實現(xiàn)
這篇文章主要介紹了iview form清除校驗狀態(tài)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本文通過示例代碼介紹了vue時間戳和時間的相互轉(zhuǎn)換方式,通過場景分析介紹了vue3使用組合式api將時間戳格式轉(zhuǎn)換成時間格式（2023年09月28日 10:00）,感興趣的朋友一起看看吧2023-12-12