Vuetify でフィルタリング機能付きセレクトボックスを実装する

Vuetifyのv-autocompleteを利用して絞り込み機能付きのセレクトボックスを実装します。

vueでの記述は下記のようになります

page.vue

<v-autocomplete
    :items="users"
    item-value="id"
    item-text="name"
    placeholder="ユーザーを選択してください"
    v-model="user"
    autocomplete="off"
>
</v-autocomplete>

methodは以下のようになります

page.vue

  data() {
    return {
      users: []
    };
  },
  methods: {
    userListLoad() {
      axios.get('https://example.com/users')
        .then(
          result => {
            Object.entries(result.users).forEach(user =>
              this.users.push({ name: user["name"], id: user["id"] })
            );
          },
          err => {
            console.log(err);
          }
        );
    },
  },

かんたんですね。