Vue.js case à cocher composant plusieurs instances

Question

J'ai une liste de filtres en utilisant les cases à cocher. J'essaie de faire de chaque case à cocher ses propres composants. Donc, je boucle dans ma liste de filtres en ajoutant un composant case à cocher pour chaque filtre. Le Vue.js documentation dit que si j'ai plusieurs cases à cocher qui utilisent le même modèle, ce tableau sera mis à jour avec la valeur des cases à cocher. Je vois cela fonctionner si le groupe de cases à cocher fait partie du composant parent. Mais si je coche la case d'un composant et que j'ajoute chaque composant checkbox dans une boucle, le modèle ne se met pas à jour comme prévu.

Comment puis-je avoir un composant checkbox qui met à jour un tableau sur le parent? Je sais que je peux le faire en émettant un événement pour une méthode sur le composant qui met à jour le tableau mais la documentation de Vue donne l'impression que le framework le fait pour vous.

Voici un exemple de code que j'ai joué avec https://www.webpackbin.com/bins/-KwGZ5eSofU5IojAbqU3

Answer 1

est ici une version de travail.

<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> 

Mise à jour bin.