How to use v | Vue li v-model
Ihaveasimplev-forloopthatrendersinputswithcheckedstatedependingonabooleanactiveproperty:Thisisthemodel:constinputs=[{year:2012,active:false},{year:2013,active:true}]Andthisisthetemplate:
I have a simple v-for loop that renders inputs with checked state depending on a boolean active property:
This is the model:
const inputs = [ { year: 2012, active: false }, { year: 2013, active: true } ]And this is the template:
<li class="filter__item" v-for="{year, active} in inputs"> <input class="filter__input" type="checkbox" :name="year" :id="year" :checked="active" v-model="active" > </li>I would expect v-model="active" to hold a reference to an object in a loop, but it doesn’t work this way. When checkboxes are selected/unselected then my model state remains unchanged. Am I doing something wrong or is it a Vue limitation? I also tried to replace v-model="active" with v-model="this", but it doesn’t work either.
I know that I could use $event.target.value together with v-for index in order to access inputs[index] and cha...