[Vuejs]-Why do not render checkboxes with checked attribute true vuejs

by

4👍

✅

You don’t need both v-model and :checked. v-model is a two way binding.

https://jsfiddle.net/bbsimonbb/eywraw8t/15613/

<div v-for="permiso in permisos" class="col-md-5 col-12 col-sm-5" >                       
    <input type="checkbox" :value="permiso.id" 
       class="form-control" :id=permiso.id
       v-model="selected"> {{ permiso.name}}
</div>

Consider creating a component for your input. Form inputs inside a v-for rapidly gets complicated.

👤bbsimonbb

3👍

You need to keep their ids in “selected” array, you are probably keeping whole objects which didn’t work from what I checked.

HTML:

<div id="app">
  <div class="row">
    <div v-for="permiso in permisos" class="col-md-5 col-12 col-sm-5" >                       
        <input type="checkbox" :value="permiso.id" 
           class="form-control" :id=permiso.id
           v-model="selected" :checked=selected.includes(permiso.id)> {{ permiso.name}}
    </div>
  </div>
</div>

Vue:

new Vue({
  el: '#app',
  data() {
    return {
      selected: [2, 4],
      permisos: [{id: 1, name: "test1"}, {id: 2, name: "test2"}, {id: 3, name: "test3"}, {id: 4, name: "test4"}]
    }
  }
})

https://jsfiddle.net/eywraw8t/15555/

This works.
If you are getting object array as response, you could do this:

this.selected = response.data.map(obj => obj.id);
👤dziraf

Leave a comment