vueのサブループ内のモデルとデータをバインドする際の問題

Question

vueのモデルとデータをバインドしようとしていますが、ネストされたループでデータをバインドしようとすると問題が発生します。

これは私がそれをやってみる方法の例です。結果では、すべてのチェックボックスが選択されていることが予想されますが、そのチェックボックスは機能しません。理由はありません。

例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

変更ご入力タグとして：

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