laravel-5 - bootstrap-vue 未在复选框中传递数组
问题描述
我在我的 laravel 项目中使用 bootstrap-vue 将数据从视图传递到带有复选框(b-form-checkbox)的数据库,我想从数据库传递的权限中进行选择并将其分配给一个角色,这意味着一个角色可以拥有多个权限,不幸的是,数据不会作为数组保存到数据库中,因为如果我在复选框中选择了多个权限,它只会显示第一个被点击的权限。请我需要帮助,因为我在这个问题上花了太多时间。这是我的代码:
edit.blade.php
@extends('layouts.master')
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Admin
<small>Edit</small>
</h1>
<ol class="breadcrumb">
<li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="{{ route('role.index') }}">Role</a></li>
<li class="active">Edit</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
@include('layouts.partials.message')
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header with-border">
<h3 class="boxtitle">Edit Role</h3>
</div>
<!-- /.box-header -->
<div class="box-body">
<form action="{{ route('role.update', ['id' => $role->id]) }}" enctype="multipart/form-data" method="post" accept-charset="utf-8">
{{csrf_field()}}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="display_name" value="{{ old('display_name', $role->display_name) }}" class="form-control" placeholder="Name (Human Readable)" required>
<span class="help-block text-red">
@if($errors->has('display_name'))
{{ $errors->first('display_name')}}
@endif
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="name" value="{{ old('name', $role->name) }}" class="form-control" placeholder="Slug (can not be edited)" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="description" value="{{ old('description', $role->description) }}" class="form-control" placeholder="Role Description">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h2>Permissions:</h2>
<b-form-group>
<b-form-checkbox-group v-model="permissionsSelected">
@foreach ($permissions as $permission)
<div class="form-group">
<b-form-checkbox id="permissions" name="permissions" value="{{ $permission->id }}">
<div class="form-group">
{{ $permission->display_name }} <em> ({{ $permission->description }})</em>
</div>
</b-form-checkbox>
</div>
@endforeach
</div>
</div>
<hr>
<div class="row">
<div class="col-md-1">
<div class="form-group">
<button class="btn btn-primary" type="submit" id="submit">
<i class="fa fa-check"></i> Submit
</button>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</div>
</div>
<div class="col-md-11">
<div class="form-group">
<div class="checkbox">
<label>
<input name="redirect" type="checkbox" checked> Redirect to role list after submission
</label>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</section>
@endsection
@section('vue')
<script>
var app = new Vue ({
el: '#app',
data: {
permissionsSelected: {!!$role->permissions->pluck('id')!!}
}
});
</script>
@endsection
解决方案
推荐阅读
- reactjs - MSAL React 并未从应用程序中注销,而是从其他已验证会话的选项卡中注销
- spring-boot - 使用Spring时监听事务成功或失败的方法有哪些(spring boot、spring data)
- spring-boot - 是否存在 QueryString 但 HttpServletRequest.getParameterMap() 为空的情况?
- typescript - 如何递归检查树节点?
- azure - 如何将 Azure CosmosDB 容器复制(备份)到 Azure Blob 存储?
- spring-boot - 向用户显示表中的多行
- c# - 从方向向量中找到所需的象限
- javascript - 当我删除项目时,ArrayInput 不会触发 onChange 函数
- flutter - 使用颜色、大小等为 Cupertino 应用程序设置主题
- javascript - 带 SSR 的哨兵