Vue.js 中 v-for 循环内 @close 事件获取索引 index 的方法

在 Vue.js 中，使用 v-for 循环时，如何通过 @close 事件获取循环中的索引 index 呢？

在 @close 事件中无法直接访问 v-for 中的索引 index，因为它不是在同一作用域中。可以使用闭包来解决这个问题，将 index 作为参数传递给 handleClose 函数，如下所示：

<el-popover placement='bottom' :width='245' trigger='hover' v-for='(item, index) in uploadRes'>
  <template #reference>
    <el-tag round color='#ffffff' closable :disable-transitions='false' @close='handleClose(index)'>{{ item.name }}</el-tag>
    <el-input v-if='inputVisible' ref='InputRef' v-model='inputValue' size='small'
      @keyup.enter='handleInputConfirm' @blur='handleInputConfirm' style='width: 65px;' />
    <el-button v-else size='small' @click='showInput' style='width: 65px;'>
      添加标签
    </el-button>
  </template>
  <template #default>
    <div class='identify-content'>
      <el-avatar class='animal-avatar' :size='60' :src='item.url' />
      <p class='animal-name'>
        {{ item.name }}
      </p>

      <p class='animal-desc'>
        {{ item.baike_info.description }}
      </p>
      <p class='animal-baike'>
        <!-- {{}} -->
        <a :href='item.baike_info.baike_url' target='_blank'>了解更多</a>
      </p>
    </div>
  </template>
</el-popover>

然后在 handleClose 函数中接收 index 作为参数：

handleClose(index) {
  // 使用 index 做一些操作
}

这样，您就可以在 handleClose 函数中使用 index 来操作对应循环项了。