当尝试使用 v-slot:append-inner 自定义 v-combobox 的下拉图标时，会在 vuetify 中创建两个下拉图标

Question

我想在单击 v-combobox 内的下拉图标时调用不同的函数。因此，当我尝试通过修改 v-slot:append-inner 并添加功能来实现该功能时，有两个下拉图标。我的方法是否错误，如果是我应该如何解决这个问题。我的模板代码

<template>
  <v-container fluid>
    <v-combobox
      v-model="userInput"
      :items="propItems"
      dense
      item-text="name"
      item-value="name"
      multiple
      return-object
    >
      <template v-slot:append-inner>
        <v-icon @click="yourFunction">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 selectedItems = ref([])
  const userInput = ref('')
  const isDropOpen = ref(false)

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

Vuetify 游乐场

Answer 1

不确定这是否是您想要的。 将“menu-icon”属性设置为空，以便删除默认图标

 menu-icon=""

还添加了 @mousedown.stop.prevent 来停止默认的下拉行为。如果您只是想删除图标，请跳过这一部分。

<v-icon @mousedown.stop.prevent @click="yourFunction">mdi-menu-down</v-icon>

游乐场