vue点击动态删除div

Posted 2023-04-11

参考技术A 1.
根据id删除对应数据 <!-- 点击传入当前点击的数据 --><el-buttontype="dangerous"@click="handleClickDelProduct(scope.row)">删除</el-button> //ES6//根据id查找元素 findIndex//函数内如果返回true,就结束遍历并返回当前index;//index如果没有找到返回-1handleClickDelProduct(row)letindex=this.newList.findIndex((product)=>returnrow.id==product.id)if(index!==-1)this.newList.splice(index,1),
2.
根据下标删除对应数据 <!-- 点击传入当前点击的下标 --><divv-f

Vue3实现动态给id赋值，点击事件获取当前点击的元素的id操作

场景

需要让输出的 id 为 0，1……

代码

<div v-for="(item,index) in list" :key="index" >
	<div :id="index" @click="b(index)">我是id</div>
</div>

然后在 vue 的实例中就可以拿到对应的 id

b(index)
    this.list.splice(index,1);

或

<div @click="open($event)" id="1">添加<div>

open(a)
  console.log(a.currentTarget.id)//1