Vuetify自定义v-select搜索：无法选中v-text-field输入文本问题

问题场景：在Vuetify的v-select组件中通过prepend-item插槽添加了搜索用的v-text-field，但输入文本后无法选中内容，也无法正常清除输入。

原代码片段：

<template v-slot:prepend-item>
  <div class="fruit-search-box">
    <v-text-field hide-details placeholder="Search" />
  </div>
</template>

问题原因 #

v-select的下拉列表项默认会监听点击事件，当点击插槽内的v-text-field时，事件会冒泡到父级的下拉项元素，触发v-select的选中逻辑，导致文本框的焦点和选中行为被干扰。

解决方法 #

给v-text-field的外层容器添加@mousedown.stop修饰符，阻止事件冒泡，避免触发v-select的下拉项点击逻辑：

<template v-slot:prepend-item>
  <div class="fruit-search-box" @mousedown.stop>
    <v-text-field hide-details placeholder="Search" />
  </div>
</template>

效果说明 #

添加@mousedown.stop后，点击v-text-field时不会触发v-select的下拉项选中事件，文本框可以正常获取焦点、选中内容和清除输入。

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