從vue.js組件讀取復選框值

Question

幾天前，我開始使用vue.js並試圖擺脫困境。

為了使這個簡單的示例生效，我一直在擺弄很多東西：使用vue.js讀取組件中選定復選框的值。

請在http://jsbin.com/gukoqo/edit?html,js,output上查看我的示例

怎樣才能讓我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 。