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

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

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

<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);
}
無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事