如何为Vuetify v-autocomplete下拉菜单项添加类并捕获点击事件

方法一：用组件自带事件（推荐，更贴合Vue/Vuetify逻辑） #

没必要折腾给下拉项加类名，v-autocomplete本身提供了@change事件——用户选中下拉项（不管是点击还是回车选择）时都会触发，直接在这个事件里调用你的D3力导向图函数即可：

修改你的v-autocomplete代码，新增@change事件：

<v-autocomplete
    v-model="valuesActor"
    :items="actorArray"
    :search-input.sync="searchActor"
    filled
    autofocus
    multiple
    @blur="toggleSearch"
    @change="handleActorSelect" <!-- 新增事件 -->
    background-color="#313131"
    append-icon=""
    prepend-inner-icon="mdi-arrow-left"
    color="var(--textLightGrey)"
    :menu-props="{maxWidth: 1600}"
    placeholder="Search for actors"
>
</v-autocomplete>

在Vue的methods中定义事件处理函数，调用你的D3逻辑：

methods: {
  handleActorSelect(selectedValues) {
    // 这里直接调用你的D3力导向图函数，比如：
    // updateForceGraph(selectedValues);
    console.log('选中的演员：', selectedValues);
  }
}

方法二：给下拉项自定义类名（匹配你原本的D3绑定思路） #

如果一定要给下拉菜单项添加指定类名，可通过v-autocomplete的item插槽自定义选项模板，在模板元素上加上你需要的autocomplete-vals类：

<v-autocomplete
    v-model="valuesActor"
    :items="actorArray"
    :search-input.sync="searchActor"
    filled
    autofocus
    multiple
    @blur="toggleSearch"
    @menu-opened="bindD3ClickEvent" <!-- 新增菜单打开事件 -->
    background-color="#313131"
    append-icon=""
    prepend-inner-icon="mdi-arrow-left"
    color="var(--textLightGrey)"
    :menu-props="{maxWidth: 1600}"
    placeholder="Search for actors"
>
  <!-- 自定义下拉项模板 -->
  <template v-slot:item="{ item, on, attrs }">
    <v-list-item
      v-bind="attrs"
      v-on="on"
      class="autocomplete-vals" <!-- 添加目标类名 -->
    >
      <v-list-item-title>{{ item }}</v-list-item-title>
    </v-list-item>
  </template>
</v-autocomplete>

注意：因为下拉菜单是动态渲染的，需要在菜单打开后再执行D3的选择绑定，否则可能找不到元素。在methods中添加绑定逻辑：

methods: {
  bindD3ClickEvent() {
    // 菜单打开后，下拉项已渲染，执行D3绑定
    d3.selectAll(".autocomplete-vals").on("click", function () {
      console.log('Yay! it works!');
      // 这里调用你的D3力导向图函数
    });
  }
}

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