Vue+Vuetify中v-for循环内动态绑定@click事件的问题

问题分析 #

当前子组件通过$emit(item.clickFunction)触发父组件事件未生效，核心原因多为事件名大小写不匹配或绑定位置/写法不符合Vue事件机制，以下是具体解决步骤：

1. 修正事件名匹配问题 #

Vue模板中使用驼峰命名的事件监听（如@CanResolve）会被自动转换为短横线分隔格式（@can-resolve），导致与子组件$emit('CanResolve')的事件名不匹配。可通过两种方式解决：

方案A：父组件用对象语法监听事件

绕过自动转换逻辑，直接指定驼峰事件名：

<embeddedPDF 
  v-on="{ CanResolve: myButtonEventHandler }"
  :filedir="pdfLocation(item.Draft_Path)" 
  :canvasid="'draft-canvas-'+item.Round" 
  :menus="menuItemsArray[item.Round-1].menus"
></embeddedPDF>

方案B：统一使用短横线事件名

将子组件数组中的事件名改为"can-resolve"，父组件对应监听：

<!-- 父组件 -->
<embeddedPDF 
  @can-resolve="myButtonEventHandler"
  :filedir="pdfLocation(item.Draft_Path)" 
  :canvasid="'draft-canvas-'+item.Round" 
  :menus="menuItemsArray[item.Round-1].menus"
></embeddedPDF>

2. 优化点击事件绑定位置 #

将点击事件绑定到v-list-item而非v-list-item-title，符合Vuetify组件交互逻辑，避免点击区域局限：

<v-menu bottom right>
  <template v-slot:activator="{ on, attrs }">
    <v-btn light icon v-bind="attrs" v-on="on">
      <v-icon>mdi-dots-vertical</v-icon>
    </v-btn>
  </template>
  <v-list>
    <template v-for="(item, index) in menus" :key="index">
      <v-list-item v-if="item.isActive" link @click="$emit(item.clickFunction)">
        <v-list-item-title>{{item.title}}</v-list-item-title>
      </v-list-item>
    </template>
    <v-list-item :href="docxLocation(filedir)" download link>
      <v-list-item-title>Download</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

3. 调试验证（可选） #

若仍未生效，可添加日志排查事件名是否正确传递：

<!-- 子组件模板 -->
<v-list-item v-if="item.isActive" link @click="handleMenuClick(item)">
  <v-list-item-title>{{item.title}}</v-list-item-title>
</v-list-item>

// 子组件methods
methods: {
  handleMenuClick(item) {
    console.log('触发的事件名:', item.clickFunction);
    this.$emit(item.clickFunction);
  }
}

通过控制台日志确认事件名与父组件监听的是否一致。

内容的提问来源于stack exchange，提问作者Qiuzman