Vue.js CRUD应用中点击编辑/删除按钮时如何获取对象ID？

我来帮你搞定这个问题！你现在遇到的情况是在循环渲染的memit列表里，点击编辑或删除按钮时没法拿到对应memit的ID，因为event.target返回的是按钮元素本身。其实Vue提供了非常直观的方式来处理这种场景，下面给你两种常用的解决方案：

方法一：直接传递memit的ID作为参数 #

你可以在绑定点击事件的时候，直接把当前循环项的memit.id作为参数传给方法，这样就能在方法里直接拿到对应ID了。

修改后的HTML模板： #

<div v-for="(memit) in memits" :key='memit.id' class="mem-it"> 
 <div> 
 <h3>{{ memit.title }}</h3> 
 <p>{{ memit.body }}</p> 
 <button @click="editMemit(memit.id)">Edit</button> 
 <button @click="deleteMemit(memit.id)">X</button> 
 </div> 
</div>

对应的methods修改： #

methods: { 
 createMemit() { 
 this.memits.push({ id: Math.random(), title:this.writeMemo, body:this.writeMemoBody }); 
 this.writeMemo=''; 
 this.writeMemoBody=''; 
 localStorage.setItem('old-memits',JSON.stringify(this.memits)); 
 },
 // 编辑方法接收ID参数
 editMemit(memitId) {
   console.log('要编辑的memit ID：', memitId);
   // 根据ID找到对应的memit，做后续编辑操作
   const targetMemit = this.memits.find(item => item.id === memitId);
   if(targetMemit) {
     // 把目标memit的内容填充到输入框
     this.writeMemo = targetMemit.title;
     this.writeMemoBody = targetMemit.body;
   }
 },
 // 删除方法接收ID参数
 deleteMemit(memitId) {
   console.log('要删除的memit ID：', memitId);
   // 过滤掉要删除的memit
   this.memits = this.memits.filter(item => item.id !== memitId);
   // 更新localStorage保持数据同步
   localStorage.setItem('old-memits',JSON.stringify(this.memits));
 }
}

方法二：传递整个memit对象 #

如果你需要用到memit的其他属性（比如标题、内容），也可以直接把整个memit对象作为参数传递，这样操作起来更方便：

修改后的HTML模板： #

<div v-for="(memit) in memits" :key='memit.id' class="mem-it"> 
 <div> 
 <h3>{{ memit.title }}</h3> 
 <p>{{ memit.body }}</p> 
 <button @click="editMemit(memit)">Edit</button> 
 <button @click="deleteMemit(memit)">X</button> 
 </div> 
</div>

对应的methods修改： #

methods: { 
 createMemit() { 
 this.memits.push({ id: Math.random(), title:this.writeMemo, body:this.writeMemoBody }); 
 this.writeMemo=''; 
 this.writeMemoBody=''; 
 localStorage.setItem('old-memits',JSON.stringify(this.memits)); 
 },
 // 编辑方法接收memit对象
 editMemit(memit) {
   console.log('要编辑的memit：', memit);
   // 直接用memit的属性填充输入框
   this.writeMemo = memit.title;
   this.writeMemoBody = memit.body;
 },
 // 删除方法接收memit对象
 deleteMemit(memit) {
   console.log('要删除的memit：', memit);
   // 根据ID过滤删除
   this.memits = this.memits.filter(item => item.id !== memit.id);
   // 更新localStorage保持数据同步
   localStorage.setItem('old-memits',JSON.stringify(this.memits));
 }
}

为什么原来的方式拿不到ID？ #

之前你用$event只能获取到按钮元素，是因为事件绑定在按钮上，event.target指向的是触发事件的DOM元素（也就是按钮），而不是循环中的memit数据。通过直接把数据作为参数传递，就能跳过DOM元素，直接拿到我们需要的业务数据啦。

内容的提问来源于stack exchange，提问作者F. Lucas Picco