javascript - vue中子循环中绑定(bind)数据与模型的问题

Question

我正在尝试将数据与 vue 中的模型绑定(bind)，但是如果我尝试在嵌套循环中绑定(bind)数据，则会遇到问题。

这是我尝试做的示例。结果我希望看到所有复选框都被选中，但它不起作用，我不明白为什么？

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