vue多个元素绑定自定义指令，若删除其中一个元素，则其他元素的指令顺序会出现错误

Question

template

data

directives

• 单击的时候会打印该元素的text
• 双击的时候会删除该元素

Answer 1

如果你只是想实现单击的时候打印该元素的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)}

Answer 2

文档有说明
除了 el 之外，其它参数都应该是只读的，切勿进行修改

建议您给元素自定义属性 通过自定义属性取值

 <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'))
                    }

Answer 3

你之前的结构是通过数组的下标来当key。那么如果改变数组下标也就随之改变了
如

[0,1,2,3,4,5]//删除其中下标为2的，
[0,1,3,4,5]//后面的下标3的会变成2的。

所以有两种方案，
一是不删除

[0,1,null,3,4,5]//位置被占用。但是不会去渲染，因为是无效数据

二是不用数组下标，把index持久化到数据结构里面

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

http://jsrun.net/IAqKp

Answer 4

自己最后的解决方案是，在其父元素绑定自定义指令。用event.target获取点击得元素。这个时候删除数组元素还是修改都不会出现问题了。