從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。