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

Question

templatedatadirectives单击的时候会打印该元素的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

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