前言：

最近在项目中遇到使用v-for渲染的元素绑定click事件在ios上执行两次，代码如下：

<div v-for="label in tagList"> 

          <span class="delete" @click="deleteLabel($index, label)">{{label.tagName}}</span>

</div>

deleteLabel事件会执行两次。

分析：

原本以为是事件冒泡，所以加上了，event.stopPropagation(); 没生效。仔细想了下，这种情况只在ios上有问题，android是好的，所以猜测是和ios兼容性有关。最终想到了ios上的点击延迟300ms。

解决方法：

通过查找官方文档，在事件后面可以加debounce过滤器，所以改成下面代码就可以了

<span class="delete" @click="deleteLabel($index, label) | debounce 0">{{label.tagName}}</span>