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。

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

1 个答案: