Vue.jsでチェックボックスで選択した値を格納するデータにid等も含めて格納したい

Question

前提・実現したいこと

以下のようなコードで、チェックボックスを選択した際に、Valueには
[{ id: 1, name: hoge }, { id:3, name: piyo }]
のように値を入れたいのですが、どのように実装すれば実現できますでしょうか？

valueに数値を使用している理由は、Laravel側でバリデーションチェックを行いたいからです。

<template>
    <div>
        <input type="checkbox" :name="`id[]`" value="1" v-model="Value">hoge
        <input type="checkbox" :name="`id[]`" value="2" v-model="Value">fuga
        <input type="checkbox" :name="`id[]`" value="3" v-model="Value">piyo
    </div>
</template>

<script>
    export default {
        props: [
            'old',
        ],
        data() {
            return {
                Value: this.old || [],
            }
        },
    }
</script>

Comments

[euledge]

clickイベントを拾って自前でセットしてはどうでしょうか

[poteto4401]

やはりそうするしかないですかね。。シンプルな方法があるかと期待しましたが、なさそうなのでおとなしくセットすることにします。回答いただきありがとうございます。

Answer 1

各チェックボックスがチェックされているかをboolean arrayで表現すれば、v-modelで簡単にバインドできますし、

[{ id: 1, name: hoge }, { id:3, name: piyo }]

もcomputed propertyでこのarrayから計算するようにしておけば便利だと思います。

JSFiddle Demo

<div id="app">
  <div class="panel">
    <div v-for="(entry, i) in entries">
      <input type="checkbox" v-model="selected[i]">
      <label>{{entry.name}}</label>
    </div>
  </div>

  <div>selectedEntries === {{selectedEntries}}</div>
</div>

new Vue({
  el: "#app",
  data () {
    return {
      entries: [
        { id: 101, name: "bla" },
        { id: 243, name: "blabla" },
        { id: 322, name: "blablabla" },
      ],
      selected: [true, true, true],
    }
  },
  computed: {
    selectedEntries () {
      return this.entries.filter((x, i) => this.selected[i])
    },
  }
})