Vue中点击元素获取name属性异常：单一方法区分点击元素问题

HTML规范里，name属性只针对表单相关元素（比如<input>、<button>、<select>等）生效，像<i>这种普通行内元素，浏览器并不会识别你手动添加的name属性，所以无论你用e.target.name还是e.currentTarget.name，都会返回undefined——这就是问题的根源！

解决方案（推荐第二种，更符合Vue风格） #

方案1：使用HTML自定义数据属性（data-*） #

给所有点击元素统一添加data-name属性，这种属性对所有HTML元素都有效，通过dataset对象就能获取：

<!-- <i>标签用data-name传递标识 -->
<i id="a" data-name="editAddress" class="fas fa-pencil-alt fa-lg px-4" v-tooltip:bottom="'Edit this address'" @click="handleClick($event)"></i>

<!-- <button>标签也统一用data-name，保持逻辑一致 -->
<button id="addAddress" data-name="addAddress" class="btn btn-primary" @click.prevent="handleClick($event)">Add a new address</button>

对应的点击方法：

handleClick(e) {
  const targetElement = e.currentTarget;
  // 统一从dataset.name获取操作标识
  const actionType = targetElement.dataset.name;
  
  console.log('当前操作类型:', actionType);
  
  // 根据标识处理模态框逻辑
  if (actionType === 'editAddress') {
    this.modalContent = '编辑地址';
    // 其他编辑相关逻辑
  } else if (actionType === 'addAddress') {
    this.modalContent = '添加新地址';
    // 其他添加相关逻辑
  }
}

方案2：直接在点击事件中传参（推荐！） #

Vue倡导数据驱动，尽量避免直接操作DOM元素。我们可以直接在@click事件里传入需要的标识，完全不用依赖元素属性：

<i id="a" class="fas fa-pencil-alt fa-lg px-4" v-tooltip:bottom="'Edit this address'" @click="handleClick('editAddress')"></i>

<button id="addAddress" class="btn btn-primary" @click.prevent="handleClick('addAddress')">Add a new address</button>

对应的点击方法会更简洁：

handleClick(actionType) {
  console.log('当前操作类型:', actionType);
  
  // 直接根据传入的标识处理模态框
  switch(actionType) {
    case 'editAddress':
      this.modalContent = '编辑地址';
      break;
    case 'addAddress':
      this.modalContent = '添加新地址';
      break;
  }
}

方案3：将替换为支持name属性的元素 #

<button id="a" name="editAddress" class="fas fa-pencil-alt fa-lg px-4 border-0 bg-transparent" v-tooltip:bottom="'Edit this address'" @click="handleClick($event)"></button>
<button id="addAddress" name="addAddress" class="btn btn-primary" @click.prevent="handleClick($event)">Add a new address</button>