Vue.js Checkbox Komponente mehrere Instanzen

Question

Ich habe eine Liste von Filtern mit Kontrollkästchen. Ich versuche, jedes Kontrollkästchen seine eigenen Komponenten zu machen. Also durchsuche ich meine Filterliste, indem ich für jeden Filter eine Checkbox-Komponente hinzufüge. Die Vue.js documentation besagt, dass, wenn ich mehrere Kontrollkästchen habe, die das gleiche Modell verwenden, das Array mit dem Wert der Kontrollkästchen aktualisiert wird. Ich sehe das funktioniert, wenn die Gruppe der Checkboxen Teil der übergeordneten Komponente ist. Aber wenn ich das Kontrollkästchen zu einer Komponente mache und jede Checkbox-Komponente in einer Schleife hinzufüge, wird das Modell nicht wie erwartet aktualisiert.

Wie kann ich eine Checkbox-Komponente haben, die ein Array auf dem Eltern aktualisiert? Ich weiß, dass ich dies tun kann, indem ich ein Ereignis für eine Methode auf der Komponente ausspreche, die das Array aktualisiert, aber die Vue-Dokumentation macht es so, als ob das Framework das für Sie tut.

Hier ist ein Codebeispiel I mit https://www.webpackbin.com/bins/-KwGZ5eSofU5IojAbqU3 herumgespielt habe

Answer 1

Hier ist eine Arbeitsversion ist.

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

Aktualisiert bin.