セレクトボックス内で表示された情報を、選択されたら、セレクトボックス内で非表示にしたい。

Vuetifyを使用してUIを作成しております。
基本的にはVuetifyの公式サイトのコードを参考にしながら作成しておりますが、
選択された情報を一旦非表示にする方法が分からず困っております。

テストコードとして下記のコードを作成しました。
selectボックス内で選択されたものが、テキストフィールド内に表示される形となっております。
実装したい動きとしては、
selectボックスにて選択
⇒テキストフィールドに選択結果表示
⇒再度selectボックスを開くと、先ほど選択された情報以外が表示されている。

という形で実装したいと思っております。
どなたかご教示いただけませんでしょうか？

Html
1<div id="app">
2  <v-app id="inspire">
3    <v-container fluid>
4      <v-row align="center">
5        <v-col cols="6">
6          <v-subheader>Custom items</v-subheader>
7        </v-col>
8  
9        <v-col cols="6">
10          <v-select
11            v-model="select"
12            :hint="`${select.state}, ${select.abbr}`"
13            :items="items"
14            item-text="state"
15            item-value="abbr"
16            label="Select"
17            persistent-hint
18            return-object
19            single-line
20          ></v-select>
21          <v-text-field v-model="select.state"></v-text-field>
22        </v-col>
23      </v-row>
24    </v-container>
25  </v-app>
26</div>

Javascript
1new Vue({
2  el: '#app',
3  vuetify: new Vuetify(),
4  data () {
5    return {
6      select: { state: 'Florida', abbr: 'FL' },
7      items: [
8        { state: 'Florida', abbr: 'FL' },
9        { state: 'Georgia', abbr: 'GA' },
10        { state: 'Nebraska', abbr: 'NE' },
11        { state: 'California', abbr: 'CA' },
12        { state: 'New York', abbr: 'NY' },
13      ],
14    }
15  },
16})

行動規範の内容に同意します

回答1件

ベストアンサー

hide-selectedを追加して以下でいけませんか？

vue
1 <v-select
2  v-model="select"
3  :hint="`${select.state}, ${select.abbr}`"
4  :items="items"
5  item-text="state"
6  item-value="abbr"
7  label="Select"
8  persistent-hint
9  return-object
10  single-line
11　hide-selected
12></v-select>