vuetify 的 v-select 組件中的搜索欄

Question

我正在使用 vuetify 的 v-select 組件。 我正在嘗試在下拉列表中添加搜索欄選項。

有什么內置的方法可以做到這一點。 我正在使用 vuetify 1.0.5 版。

    <v-select
     :items="users"
     attach
     item-text='name'
     item-value='name'
     v-model="association.name"
     :rules='nameRule'
     label="First Name"
     required>
    </v-select>

Answer 1

聽起來您正在尋找v-autocomplete 。

Vuetify 1.0.5 似乎非常過時（當前版本：1.5.24 / 2.2.20），如果可以的話，你應該更新。

Answer 2

您需要添加一個模板槽並編寫自定義搜索邏輯。 我為此創建了一個代碼筆。 請根據您的需要進行更改。

<template v-slot:prepend-item>
  <v-list-item>
    <v-list-item-content>
      <v-text-field v-model="searchTerm" placeholder="Search" @input="searchFruits"></v-text-field>
    </v-list-item-content>
  </v-list-item>
  <v-divider class="mt-2"></v-divider>
</template>

// method
searchFruits (e) {
  if (!this.searchTerm) {
    this.fruits = this.fruitsCopy;
  }

  this.fruits = this.fruitsCopy.filter(fruit => {
    return fruit.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1
  })
}

https://codepen.io/sudheer-ranga/pen/bGVbjbx