vue中使用指令，列表數據發生變化指令沒有更新

問題描述，在vue的for循環中使用了指令，而後對數據進行篩選的時候，發現指令沒有起做用。

如圖前面的圖標是根據文件名的後綴名，返回響應圖標的，經過指令實現的。而後咱們在搜索框中刪選之後，數據更新了，可是圖標沒有更新

分析緣由

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

問題就出在了:key='index'由於vue中for循環是根據key的值的變化來更新vnode的，很顯然咱們通過篩選若是刪選出三條數據，那麼index = 0, 1, 2沒有變化，因此vnode沒有更新

解決辦法1：咱們設置:key的時候最好使用每條數據的id這樣就是惟一的，每次篩選，vnode都會更新。

解決辦法2：在指令中設置

// 添加bind設置
bind: function (el, binding, vnode) {
  // bind中的vnode裏面的key能夠給設置一個隨機數，這樣每次都會更新虛擬節點。
  let num = parseInt(Math.random() * 10)
  vnode.key = num
},
inserted: ...