Auto Checked Checkbox value using vue.js

Question

On my edit page I'm trying to make my checkbox auto checked based on the permissions that I already assigned to my roles, I don't know how to make it work. Any idea? Currently with my code I'm getting unchecked checkbox with the list of all my permissions.

Edit.blade

var app = new Vue({
  el: '#app',
  data: {
    permissionsSelected: []
  }
});

<div class="from-group">
  <div class="checkbox-group" v-model="permissionsSelected">
    @foreach ($permissions as $permission)
    <div class="field">
      <input type="checkbox" value="{{$permission->id}}" name="permissions[]">{{$permission->display_name}}
    </div>
    @endforeach

  </div>

Check the "multiple checkboxes" part: vuejs.org/v2/guide/forms.html#Checkbox You would need to change your markup a bit, and in order to auto check, to populate the permissionsSelected array with the appropiate checkbox values. — yuriy636
– yuriy636, Commented Dec 29, 2017 at 17:48
bro. my checkbox value is i'm getting it on my roles which is stored in my database how to pull it out? — Copain
– Copain, Commented Dec 29, 2017 at 17:55

dfsq · Accepted Answer · 2017-12-29 17:47:47Z

1

Remove v-model="permissionsSelected" from div and add it to each checkbox:

<div class="from-group">
  <div class="checkbox-group">
    @foreach ($permissions as $permission)
    <div class="field">
      <input
        type="checkbox" 
        value="{{$permission->id}}"
        name="permissions[]" 
        v-model="permissionsSelected"> {{$permission->display_name}}
    </div>
    @endforeach
</div>

Also make sure your data setup is a function returning an object:

data () {
  return {
    permissionsSelected: []
  }
}

answered Dec 29, 2017 at 17:47

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

3 Comments

Copain Over a year ago

how to return my data on the permissionSelected since my data is base on my database how to pull it out ? meaning permission_id +user_id?

dfsq Over a year ago

Selected permissions will populate permissionsSelected array. You don't need to do anything for this to work.

Copain Over a year ago

var app = new Vue({ el: '#app', data () { return { permissionsSelected: [] } } }); not working bro.

Collectives™ on Stack Overflow

Auto Checked Checkbox value using vue.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related