如何获取Vuetify Autocomplete点击项的索引并修改对应对象属性

你绑定的click事件是输入框本身的点击事件，和下拉面板内的选项点击无关联，自然无法获取选项索引。以下是两种可行实现方案：

方案1：通过item插槽自定义选项绑定点击事件 #

该方案最灵活，只要点击选项就会触发逻辑，不受选中状态变化限制：

<template>
  <v-autocomplete
    :items="state.filters"
    v-model="selectedVal"
  >
    <!-- 自定义下拉选项插槽，直接拿到每一项的索引和对应数据 -->
    <template v-slot:item="{ item, index }">
      <v-list-item @click="handleItemClick(index)">
        <v-list-item-title>{{ item.label }}</v-list-item-title>
      </v-list-item>
    </template>
  </v-autocomplete>
</template>

<script setup>
const handleItemClick = (index) => {
  // 直接修改对应索引的属性即可
  state.filters[index].isSelected = !state.filters[index].isSelected
}
</script>

方案2：通过选中值反向匹配索引 #

该方案无需自定义插槽，仅在选项被选中时触发修改逻辑：

<template>
  <v-autocomplete
    :items="state.filters"
    v-model="selectedItem"
    return-object
    @update:model-value="handleSelect"
  >
  </v-autocomplete>
</template>

<script setup>
const handleSelect = (selected) => {
  // 用唯一标识匹配索引，避免数组动态变更导致下标错位
  const index = state.filters.findIndex(item => item.id === selected.id)
  if (index > -1) {
    state.filters[index].isSelected = !state.filters[index].isSelected
  }
}
</script>

注意事项 #

如果你的filters数组会动态新增、删除元素，优先用唯一键（如id）匹配索引，不要直接依赖数组下标的稳定性，避免修改错对象。

内容的提问来源于stack exchange，提问作者Jérôme BORGA