主页 / user-4605817

Andrei Maieras's questions

Martin Hope
Andrei Maieras
Asked: 2025-04-10 18:30:54 +0800 CST
  • 6

我正在使用 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())
  )
})

带有复制问题的游乐场链接

vuejs3