如何禁用v-autocomplete中附加图标点击触发的选项菜单事件

要阻止点击清除图标或附加内部图标时弹出选项菜单，核心是阻止图标点击事件向上冒泡，避免触发v-autocomplete的菜单展开逻辑。可以通过Vuetify的事件修饰符直接实现：

具体修改步骤 #

• 给@click:append-inner事件添加.stop修饰符，阻止点击附加图标时事件冒泡
• 给清除图标添加@click:clear.stop事件（即使不需要额外逻辑，也要用.stop阻止冒泡）

修改后的完整代码 #

<v-autocomplete
  v-for="(header,index) in headers"
  :key="index"
  v-model="header.filtered"
  class="my-5"
  clearable
  chips
  :label="header.title"
  :items="getUniqueList(displayedReviews,header.key)"
  multiple
  density="compact"
  variant="outlined"
  hide-details
  single-line
  flat
  @blur="applyFilters()"
  :append-inner-icon="header.visible ? 'mdi-eye' : 'mdi-eye-off'"
  @click:append-inner.stop="header.visible = !header.visible"
  @click:clear.stop
>
</v-autocomplete>

原理说明 #

v-autocomplete的菜单展开逻辑绑定在输入框的点击事件上，点击内部图标时，事件会默认向上冒泡到输入框元素，触发菜单展开。使用.stop修饰符可以终止事件传播，让图标点击只执行自身绑定的逻辑，不会触发菜单展开。

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