Vue.js复选框组件多个实例

Question

我有一个使用复选框的过滤器列表。我试图让每个复选框都是自己的组件。所以我循环遍历我的过滤器列表，为每个过滤器添加一个复选框组件。 Vue.js documentation表示如果我有多个使用相同模型的复选框，数组将使用复选框的值进行更新。如果这组复选框是父组件的一部分，我就会看到这个工作。但是，如果我使复选框成为一个组件并在循环中添加每个复选框组件，那么该模型不会按预期更新。

我怎样才能有一个复选框组件更新父级的数组？我知道我可以通过为组件上的方法发布事件来更新数组，但Vue文档使框架看起来像是为你做的。

下面是一个代码示例中，我一直在玩弄https://www.webpackbin.com/bins/-KwGZ5eSofU5IojAbqU3

Answer 1

这里是一个工作版本。

<template> 
    <div class="filter-wrapper"> 
    <input type="checkbox" v-model="internalValue" :value="value"> 
    <label>{{label}}</label> 
    </div> 
</template> 

<script> 
    export default { 
    props: ['checked','value', 'label'], 
    model: { 
     prop: "checked" 
    }, 
    computed:{ 
     internalValue: { 
     get(){return this.checked}, 
     set(v){this.$emit("input", v) } 
     } 
    } 
    } 
</script> 

更新bin。