使用vue.js自动选中复选框值

Question

在我的编辑页面上，我正在尝试根据我已分配给我的角色的权限自动选中我的复选框，我不知道如何使其工作。任何的想法？目前我的代码我正在取消选中复选框，其中包含我所有权限的列表。

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

从div中删除v-model="permissionsSelected"并将其添加到每个复选框：

<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>

还要确保您的数据设置是返回对象的函数：

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