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>