vue.js

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

やりたいこと

「複数のアイテムがそれぞれ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.