vuetify v-autocompleteの内容を動的に選択したいが選べない時の対処法

変数の型を見直したほうがいい説。

上記のようなデータベースから、選択肢を作成

↓

↓こんな感じのコードになる

<v-autocomplete v-model="detailSearchKey.operator" item-value="id"
    item-text="name" :items="operators"
    label="オペレーター"
    placeholder="検索できます">
</v-autocomplete>

v-model="detailSearchKey.operator"→バックエンドに投げるときとかに使う（IDである数値のみが格納される）

item-value="id"→v-modelで扱うのはIDだよ！って意味になる。

:items="operators"→選択肢のオブジェクト（「IDと名前」軍が入ってる）

v-autocomplete（検索可能プルダウン）は、

キー:ID（データベースに投げるときに使う）

値:名前（表示するときに出てくる）

のように、裏側で扱うときと目で見える値を別々に設定することができる。

たとえば、created(){}

内とかで、detailSearchKey.operator = 1

などと指定し置けば、初めから「まこなり」が選択された状態にできる。

しかし、この1を変数などで取得しようとすると失敗する場合がある。

//localhost:8080/inquiries?operator=1

created(){
    if (this.$route.query.operator) {
            this.detailSearchKey.operator = this.$route.query.operator;//URLからoperatorの番号(id)を取得
  }
}

これだとうまくいかない。

↓ちゃんと数値型に変換せなあかん。

if (this.$route.query.operator) {
    this.detailSearchKey.operator = Number(this.$route.query.operator);
}