我正在使用 Vuetify 3+,并尝试添加一个文本输入框,以便搜索传递给 V-Select 组件的元素。问题是,当我执行搜索并在内部更改 items 属性输入时,V-Select 组件会更改 V-Model,从而选择搜索到的元素(如果有)。我不希望出现这种情况,我希望只有当我明确点击该元素的复选框时才会进行选择。
<v-select
:item-title="itemTitle"
:item-value="itemValue"
:items="filteredItems"
:loading="!disabled ? loading : false"
:menu-props="menuProps"
:model-value="modelValue"
:name="name"
:placeholder="placeholder"
:prepend-inner-icon="icon"
:readonly="disabled"
:required="required"
:return-object="returnObject"
:rules="rules"
attach
width="220px"
class="custom-menu-select"
dense
density="compact"
hide-details
@update:model-value="updateModelValue"
@update:menu="updateMenu"
>
<template v-if="enableSearch" #prepend-item>
<div class="sticky-header">
<v-text-field
v-model="searchQuery"
:loading="loadingSearch"
:placeholder="searchLabel"
append-inner-icon="ibm:Search16"
class="select-search-input"
clearable
density="compact"
hide-details
variant="outlined"
@click:clear="searchQuery = ''"
></v-text-field>
</div>
</template>
<template #selection="{ item }">
<slot :item="item" name="selection">
<span>{{ item ? item['title'] : placeholder }}</span>
</slot>
</template>
<template #item="{ props, item }">
<slot :item="item" :props="props" name="item">
<TooltipPopup
:disabled="!item.raw.disabled || !item.raw.tooltip"
:tooltip="item.raw.tooltip"
placement="right"
>
<template #activator>
<v-list-item
:disabled="item.raw.disabled"
density="compact"
v-bind="props"
></v-list-item>
</template>
</TooltipPopup>
</slot>
</template>
</v-select>
上面是我的选择组件,这里是我的过滤计算(我尝试使用克隆和不使用克隆,仍然得到相同的结果)
const filteredItems = computed(() => {
const clonedItems = [...props.items]
if (!props.enableSearch) return clonedItems
if (props.serverSearch) return localItems.value
if (!searchQuery.value) return clonedItems
return clonedItems.filter((item) =>
item[props.itemTitle].toLowerCase().includes(searchQuery.value.toLowerCase())
)
})
带有复制问题的游乐场链接
将
@keydown.stop
和@keyup.stop
放在内部 VTextField 上似乎可以解决问题:查看更新的游乐场