変数の型を見直したほうがいい説。
上記のようなデータベースから、選択肢を作成
↓
↓こんな感じのコードになる
<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);
}