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>

Answer 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: []
  }
}