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。