将多个子复选框绑定到一个父级

Question

有没有办法将多个子级的多个复选框绑定到一个父级（例如通过模型）？

假设子组件有这样的东西：

<input
  type="checkbox"
  :id="'ticket-'+id"
  :checked="checked"
/>

现在，是否有可能有一个像 selected 这样的父属性，它将 id 作为值收集到所有子选中复选框的数组中？

{
  selected: [
    5,
    8
  ]
}

最接近我的解决方案的是this。但就我而言，我不想跟踪未检查的实例。

Answer 1

您可以监听父级上的复选框change 事件并调用更新数据模型的方法。

看看下面演示这个的小提琴。 （打开整页才能正确查看）

new Vue({
  el: "#app",
  data: {
    list: [
    { id: 1, label: 'Check 1'},
    { id: 2, label: 'Check 2'},
    { id: 3, label: 'Check 3'},
    { id: 4, label: 'Check 4'},
    ],
    selected: []
  },
  methods: {
    handleChange: function(ev) {
      let id = ev.target.id;
        if (ev.target.checked) {
        if (!this.selected.includes(id)) {
            this.selected.push(id);
        }
      } else {
        this.selected = this.selected.filter(function (item) {
            return item !== id;
        });
      }
      
      console.log('Updated: ', this.selected);
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app">
  <ol @change="handleChange">
    <li v-for="check in list">
      <label>
        <input type="checkbox" :id="check.id" />
        <span>{{check.label}}</span>
      </label>
    </li>
  </ol>
</div>