​

// Define a new component called todo-item

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)

      }

    }

  }

});