Vue.jsのv-modelにオブジェクトの配列をバインドする

やりたいこと

Vue.jsのv-modelにバインドされるデータをオブジェクトの配列にする

例えば、

new Vue({
  el: '#app',
  data: {
    vals: [
        {id: 1, name: "a"},
        {id: 2, name: "b"},
    ],
    checkedVal: []
  }
});

のようなデータを以下の通りバインディングしたとき、

<p v-for="val in vals">
  {{ val.name }}
  <input type="checkbox" v-model="checkedVal">
</p>

チェックボックスにチェックをつけると checkedVal には vals の要素オブジェクトまるごとを入れたいという感じ。

jsfiddle書いたのでそちらを見たほうが早いかもしれない
https://jsfiddle.net/seihmd/kaghf0xd/

やりかた

v-modelをつけたタグに v-bind:value="val" をつければいい。

<input type="checkbox" v-model="checkedVal" v-bind:value="val">

実際の動作はfiddleのほうで。

初期値を設定したいとき

v-modelにバインドする配列（上記jsで言えばcheckedVal）に値を設定しておけばチェックボックスをtrueにしておくこともできるが、オブジェクトの場合は各プロパティの値が同じであれば同一とみなされるようだ。

こう書くと対応する対応するチェックボックスがtrueの状態でレンダリングされる。

data: {
    vals: [
        {id: 1, name: "a"},
        {id: 2, name: "b"},
    ],
    checkedVal: [{id: 1, name: "a"}]
  }

比較のパフォーマンスは落ちるだろうし、どのような値のプロパティでも比較できるわけはないので、オブジェクトまるごとを使うのはシンプルな構造の場合にとどめておいたほうがいいと思う。

一部のプロパティだけ渡したい

オブジェクトまるごとではなく一部のプロパティだけを渡したい場合はvalueで指定してやればok

<input type="checkbox" v-model="checkedVal" v-bind:value="{id: val.id, name: val.name}">