an issue about binding data with model in sub loop in the vue

Question

I'm trying to bind data with model in the vue but I've got an problem if I try to bind data in nested loops.

This is example how I try do it. In result I expect to see all checkboxes are selected, but its don't work and I don't get why?

example 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'
                }
            ]
        }
    ]}
    }
})

Victor Benetatos · Accepted Answer · 2016-04-04 08:14:29Z

1

Change your input tag as:

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

answered Apr 4, 2016 at 8:14

Victor Benetatos

4164 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Evgenii Over a year ago

I should change to "<input type="checkbox" v-model="option.checked">"

Collectives™ on Stack Overflow

an issue about binding data with model in sub loop in the vue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related