vue多個元素綁定自定義指令，若刪除其中一個元素，則其他元素的指令順序會出現(xiàn)錯誤

如果你只是想實現(xiàn)單擊的時候打印該元素的text，雙擊的時候會刪除該元素，那么使用vue的事件綁定不是更簡單？

<p v-for="(item,index) in aa" :key="index" @click="log(item.text)" @dblclick="spl(index)">{{item.text}}</p>

methods

log(i){console.log(i)},
spl(i){this.aa.splice(i,1)}

你之前的結(jié)構(gòu)是通過數(shù)組的下標(biāo)來當(dāng)key。那么如果改變數(shù)組下標(biāo)也就隨之改變了
如

[0,1,2,3,4,5]//刪除其中下標(biāo)為2的，
[0,1,3,4,5]//后面的下標(biāo)3的會變成2的。

所以有兩種方案，
一是不刪除

[0,1,null,3,4,5]//位置被占用。但是不會去渲染，因為是無效數(shù)據(jù)

二是不用數(shù)組下標(biāo)，把index持久化到數(shù)據(jù)結(jié)構(gòu)里面

[{value: 0,index:0},{value: 1,index:1},{value: 3,index:3},{value: 4,index:4},{value: 5,index:5}]

http://jsrun.net/IAqKp

文檔有說明
除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，切勿進行修改

建議您給元素自定義屬性 通過自定義屬性取值

 <a href="javascript:;" v-for='item in aa' v-click="{i:item.text}" :data="item.text">{{item.text}}</a>

 function a() {
                        console.log(this.getAttribute('data'))
                    }

自己最后的解決方案是，在其父元素綁定自定義指令。用event.target獲取點擊得元素。這個時候刪除數(shù)組元素還是修改都不會出現(xiàn)問題了。