本人在开发项目中遇到一个需要动态添加表单的需求，如下图：

 可以点击下面的两个按钮分别添加不同的表单元素在页面，添加是没有问题的，如下图：

 在新添加的表单元素后面都有删除的图标，此时绑定了点击事件，删除本条元素在数组中的索引位置的一条数据，按道理说点击一次只会触发一次点击事件并且只会删除一项，但是奇怪的事情发生了，如下图左下角打印的元素索引被打印的次数，每点击一次，点击的元素的索引都会被打印两次：

 本来有8条数据，触发了两次删除事件，删除了两次数组元素中的索引为2的数据，因此数据变成了6条，但是这个效果明显不是我们需要的，这个问题困扰了我好几天，但是今天突然灵机一动，想到了一个非常简单的原因，那就是：事件冒泡！

因此解决方案也就非常简单了，只需要在代码中加入：event.stopPropagation()，一行代码就可以解决，如下图再次点击时，发现就只会触发一次了，问题完美解决。

 

 感觉有用的记得点个赞哦！

# 前端 # javascript # html # vue.js
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue