使用v-slot:append-inner自定义v-combobox下拉图标出现双图标问题

你用v-slot:append-inner添加自定义图标时，v-combobox默认自带的下拉图标不会被替换，而是和你新增的图标并排显示，所以出现了两个下拉图标。

方法一：复用默认图标，添加自定义逻辑 #

不需要新增图标，直接在v-combobox上监听click:menu事件，点击默认下拉图标时会触发你的自定义函数，同时不影响菜单正常展开/收起：

<template>
  <v-container fluid>
    <v-combobox
      v-model="userInput"
      :items="propItems"
      dense
      item-text="name"
      item-value="name"
      multiple
      return-object
      @click:menu="yourFunction"
    ></v-combobox>
  </v-container>
</template>

<script setup>
import { ref } from 'vue'

const propItems = ref(['Gaming', 'Programming', 'Vue', 'Vuetify'])
const userInput = ref('')

const yourFunction = () => {
  alert('here')
}
</script>

方法二：自定义图标替换默认图标 #

如果需要修改图标样式或内容，先通过menu-icon=""隐藏默认图标，再在append-inner插槽中添加自定义图标，若要保留菜单展开功能，可结合组件的toggleMenu方法：

<template>
  <v-container fluid>
    <v-combobox
      ref="comboboxRef"
      v-model="userInput"
      :items="propItems"
      dense
      item-text="name"
      item-value="name"
      multiple
      return-object
      menu-icon=""
    >
      <template v-slot:append-inner>
        <v-icon @click="handleIconClick">mdi-menu-down</v-icon>
      </template>
    </v-combobox>
  </v-container>
</template>

<script setup>
import { ref } from 'vue'

const propItems = ref(['Gaming', 'Programming', 'Vue', 'Vuetify'])
const userInput = ref('')
const comboboxRef = ref(null)

const handleIconClick = () => {
  yourFunction()
  comboboxRef.value?.toggleMenu()
}

const yourFunction = () => {
  alert('here')
}
</script>

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