Posted at

v-modelに複数のselectboxをバインドする

More than 1 year has passed since last update.


やりたいこと

「複数のアイテムがそれぞれselectboxを持つUI」をv-modelで表現する。

id:1のselectbox

<select name="" v-model="?">
<option value="a">A</option>
<option value="b">B</option>
</select>

id:2のselectbox
...

id:3のselectbox
...


方法

CodePenを見たほうが話が早いと思う。

v-modelを{ アイテムのid: 選択した値 }という形式のobjectにしてそれを素直に書いた感じ。

See the Pen vue v-model multi-select by seihmd (@seihmd) on CodePen.