ein Problem über das Binden von Daten mit Modell in Sub-Schleife in der Vue

Question

Ich versuche, Daten mit Modell in der Vue zu binden, aber ich habe ein Problem, wenn ich versuche, Daten in verschachtelten Schleifen zu binden.

Dies ist ein Beispiel, wie ich es versuche. Im Ergebnis erwarte ich, dass alle Checkboxen ausgewählt sind, aber es funktioniert nicht und ich verstehe nicht warum?

Beispiel https://jsfiddle.net/zmum6cnw/

<div id="element"> 

<div v-for="filter in filters"> 
    {{filter.name}} 
    <div v-for="option in filter.options"> 
     <input type="checkbox" v-model="option.status"> 
     {{option.name}} 
    </div> 
</div> 
<pre> 
    {{filters | json}} 
</pre> 

var obj = new Vue({ 
    el: '#element', 
    data: {   
     filters: [ 
     { 
      name: '#1', 
      options: [ 
       { 
        checked: true, 
        name: 'A' 
       }, 
       { 
        checked: true, 
        name: 'B' 
       }, 
       { 
        checked: true, 
        name: 'C' 
       } 
      ] 
     }, 
     { 
      name: '#2', 
      options: [ 
       { 
        checked: true, 
        name: 'A' 
       }, 
       { 
        checked: true, 
        name: 'B' 
       }, 
       { 
        checked: true, 
        name: 'C' 
       } 
      ] 
     } 
    ]} 
    } 
}) 

Answer 1

Ändern Sie Ihre Eingabe-Tag als:

<input type="checkbox" v-model="option.status" checked = option.checked>