从vue.js组件读取复选框值

Question

几天前，我开始使用vue.js并尝试掌握它。

我一直在摆弄这个简单的示例：阅读与vue.js的组件中选定的复选框的值。

请在http://jsbin.com/gukoqo/edit上参见我的示例？

如何让父实例中的selected包含复选框的选定值？例如，选择了filter_a和filter_c，然后selected应包含一个数组： ['filter_a', 'filter_c']

我希望vue.js能使这个变得非常简单，但还不知道如何。任何人？：(

我正在使用最新的vue.js(目前2.3.3(

Answer 1

一种可能的方式。

Vue.component('facet-filter', {
  props: ['filter', 'checked'],
  template: `<div>
              <label class="form-check-label">
                <input @change="$emit('change', filter.text, $event)" 
                       class="form-check-input" 
                       type="checkbox" 
                       :value="filter.text" 
                       :checked="checked" 
                       name="filters"> {{filter.text}}
              {{$props | json 2}}</label>
            </div>`,
});
new Vue({
  el: '#app',
  data: {
    filterFacets: [
      { id: 0, text: 'filter_a' },
      { id: 1, text: 'filter_b' },
      { id: 2, text: 'filter_c' },
      { id: 3, text: 'filter_d' },
    ],
    selected: [], // How can I let this contain ['filter_a', 'filter_b'] etc. when selected?
  },
  methods:{
    onChange(filter, $event){
      if ($event.target.checked)
        this.selected.push(filter)
      else {
        const index = this.selected.findIndex(f => f === filter)
        if (index >= 0)
          this.selected.splice(index, 1)
      }
    }
  }
});

并将模板更改为

<div id="app">
  <facet-filter
    v-for="item in filterFacets"
    v-bind:filter="item"
    v-bind:checked="selected.includes(item.text)"
    :key="item.id"
    @change="onChange"
    >
  </facet-filter>
  <p><pre>data: {{$data | json 2}}</pre></p>
</div>

更新了bin。