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が更新されました。