vue.jsコンポーネントからチェックボックスの値を読み取る

Question

数日前、私はvue.jsの使用を開始し、それを取得しようとしました。

この簡単な例がうまくいくためには、vue.jsを使用してコンポーネント内の選択したチェックボックスの値を読むのがかなり面倒です。

私は、チェックボックスの選択された値が含まれている親インスタンスにselectedを聞かせすることができますどのように

http://jsbin.com/gukoqo/edit?html,js,outputに私の例を参照してください？たとえば、filter_aとfilter_cが選択されている場合は、selectedに配列が含まれている必要があります。['filter_a', 'filter_c']

vue.jsでこれを簡単に行うことができますが、まだわかりません。誰でも？ :)私は、最新のvue.js（現時点では2.3.3）

Answer 1

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) 
     } 
    } 
    } 
}); 

そしてbin更新

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

にテンプレートを変更します。