Início / user-4605817

Andrei Maieras's questions

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

Estou usando o Vuetify 3+ e estou tentando adicionar uma entrada de texto para poder pesquisar os elementos passados ​​para o componente v-select. O problema é que, quando faço uma pesquisa e altero a entrada de propriedades dos itens internamente, o componente v-select altera o v-model, selecionando o item pesquisado, se houver. Não quero isso, preciso que a seleção aconteça apenas quando eu clicar explicitamente na caixa de seleção do item.

<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>

Acima está meu componente selecionado e aqui está meu componente filtrado computado (tentei com clone e sem ele e ainda obtive o mesmo resultado)

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())
  )
})

Link de playground com problema replicado

vuejs3