vuetify v-menu 中的搜索功能

Question

<v-menu attach="#user-filters" offset-y class="user-filters">
 <template v-slot:activator="{ on, attrs }">
  <div class="dropdown" v-bind="attrs" v-on="on">User Name</div>
 </template>
 <v-list id="user-filters">
  <template v-for="(user_name, index) in user_names">
   <v-list-item
    :key="`name_${index}`"
    @click="filterUsers({name: user_name})">
    <v-list-item-title>{{ user_name.name }}</v-list-item-title>
   </v-list-item>
  </template>
 </v-list>
</v-menu>

我正在使用 v-menu 定义过滤器，但 v-menu 下拉列表中的问题是我没有搜索功能来搜索下拉列表，所以我正在考虑切换到 v-autocomplete 但不知道如何实现它。 请帮帮我。 我正在使用 vuetify 2.3.10 版。

Answer 1

这是搜索/过滤的最佳方法，select 并使用 v-autocomplete 删除过滤的用户。

<template>
  <v-app>
    <div id="app">
      <v-autocomplete
        v-model="filteredUsers"
        :items="user_names"
        filled
        chips
        color="blue-grey lighten-2"
        label="Select"
        item-text="name"
        item-value="name"
        hide-selected
        multiple
      >
        <template v-slot:selection="data">
          <v-chip
            v-bind="data.attrs"
            :input-value="data.selected"
            close
            @click="data.select"
            @click:close="remove(data.item)"
          >
            {{ data.item.name }}
          </v-chip>
        </template>
        <template v-slot:item="data">
          <template>
            <v-list-item-content>
              <v-list-item-title v-html="data.item.name"></v-list-item-title>
            </v-list-item-content>
          </template>
        </template>
      </v-autocomplete>
    </div>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    user_names: [{ name: "abc" }, { name: "def" }, { name: "xyz" }],
    filteredUsers: [],
  }),
  methods: {
    //to remove users which a user wants
    remove(item) {
      //find index of user by name
      const index = this.filteredUsers.indexOf(item.name);
      //if user find then remove from selected users array
      if (index >= 0) this.filteredUsers.splice(index, 1);
    },
  },
};
</script>