3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Vuetifyのv-comboboxで自由に入力された文字列を取得したい

Last updated at Posted at 2020-02-18

v-comboboxを使うということは自由入力させたいということなのに、自由入力した文字をうまく取得できない!
なぜか微妙にハマったのでメモっておきます。

例のとおりリスト要素から選択された際はselecteditemにオブジェクトがバインドされるまではいいが、では自由に入力された値は?
オフィシャルのドキュメントをよく読むと、、valueプロパティは The input's value、つまり入力された値はvalueプロパティに入る、と記載されております。そこでselecteditemのハンドリングとも併せて検証してみました。

結果、:value="inputedvalue"のバインドだと入力された値は取得できず、 ref="comb"で$refs経由の取得がうまくいきました。


<v-combobox
    v-model="selecteditem"
    :items="items"
    item-text="name" item-value="id" return-object
    ref="comb" :value="inputedvalue">
</v-combobox>


selecteditem: null,
items : [
    { id:"001", name:"牛丼" },
    { id:"002", name:"ピザ" },
    { id:"003", name:"ラーメン" },
]

<script>
var val = "";

// バインド経由では取れない
val = this.inputedvalue; 

// $refs経由でプロパティ直見すると取れる
val = this.$refs.comb.value;

// itemsの中の選択肢から選ぶ判定はv-modelがobjectになってることを確認すればよい
if(this.selecteditem && this.selecteditem.id) {
    val = this.selecteditem.id + " / " + this.selecteditem.name;
}

alert(val);
</script>
3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?