Question

我正在构建一个访问控制列表，其中应用程序中的每个角色都有一组权限。我正在尝试创建一个“编辑角色”页面，该页面将显示复选框列表，所选框将是角色已具有的权限。我有一组与我希望从我的JavaScript文件中访问的角色相关联的权限。也就是说，我有一个数组$role->permissions->pluck('name'))，我想要从我的Vue实例访问。然后，从此实例中，将属性permissionsSelected绑定到我的刀片文件中的复选框。这是我的编辑页面。（我使用UI组件Buefy作为复选框，因此标记为<b-checkbox></b-checkbox>）

Edit.blade.php

@extends('layouts.manage')

@section('content')
<div class="flex-container">
<div class="columns m-t-10">
  <div class="column">
    <h1 class="title">Edit {{$role->display_name}}</h1>
  </div>
  <div class="column">
    <a href="{{route('roles.edit', $role->id)}}" class="button is-primary is-pulled-right"><i class="fa fa-user-plus m-r-10"></i> Edit this Role</a>
  </div>
</div>
<hr class="m-t-0">
<form action="{{route('roles.edit', $role->id)}}" method="POST">
  {{ csrf_field() }}
  {{ method_field('PUT') }}

<div class="columns">
  <div class="column">
    <div class="box">
      <article class="media">
        <div class="media-content">
          <div class="content">
            <h2 class="title">Role Details:</h2>

            <div class="field">
              <p class="control">
                <label for="display_name" class="label">Name (Human Readable)</label>
                <input type="text" class="input" name="display_name" value="{{$role->display_name}}" id="display_name">
              </p>

            </div>

            <div class="field">
              <p class="control">
                <label for="name" class="label">Slug (Cannot be edited)</label>
                <input type="text" class="input" name="name" value="{{$role->name}}" disabled id="name">
              </p>

            </div>

            <div class="field">
              <p class="control">
                <label for="description" class="label">Description</label>
                <input type="text" class="input" value="{{$role->description}}" id="description">
              </p>

            </div>

          </div>
        </div>
      </article>
    </div>
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="box">
      <article class="media">
        <div class="media-content">
          <div class="content">
            <h2 class="title">Permissions:</h2>

              @foreach ($permissions as $permission)
                <div class="field">
                  <b-checkbox v-model="permissionsSelected" native-value="{{$permission->name}}">{{$permission->display_name}} <em>({{$permission->description}})</em></b-checkbox>
                </div>

              @endforeach


          </div>
        </div>
      </article>
    </div>
  </div>
</div>
</form>
</div>
@endsection

这是我的JavaScript文件 App.js

中的Vue实例

const app = new Vue({
el: '#app',
data: {
    auto_password: true,
    password_options: 'keep',
    permissionType: 'basic',
    permissionsSelected: '',
resource: '',
crudSelected: ['create', 'read', 'update', 'delete']
    },

    methods: {
    crudName: function(item) {
      return item.substr(0,1).toUpperCase() + item.substr(1) + " " + app.resource.substr(0,1).toUpperCase() + app.resource.substr(1);
    },
    crudSlug: function(item) {
      return item.toLowerCase() + "-" + app.resource.toLowerCase();
    },
    crudDescription: function(item) {
      return "Allow a User to " + item.toUpperCase() + " a " + app.resource.substr(0,1).toUpperCase() + app.resource.substr(1);
    }
  }
 });

我希望能够在我的JS文件中执行类似permissionsSelected: {!!$role->permissions->pluck('id')!!}的操作。我该如何解决这个问题？

Answer 1

有两种方法可以将数据从Php传输到Vue。

使用网络电话。暴露一个休息终点，点击它并获得数据。这是理想的情况，但涉及很多额外的工作
使用data attributes传递数据，我认为在您的情况下，您会想要使用它。那我们怎么做呢？

首先，我们应该为HTML元素添加一个id。然后为其添加数据属性。然后使用刀片模板将数据解析为json，并将data属性设置为this。然后在vue中创建/挂载的钩子中提取数据并设置为状态。

<div id="custom-data" data-profiles="{{someVar.json}}">
  Any content as ususal
</div>

P.S我不知道刀片和PHP语法，因此someVar.json可能不正确。

在vue挂钩中，我会做这样的事情。

created() {
  const el = document.getElementById('custom-data')
  const profiles = JSON.parse(el.dataset.profiles)
  this.profiles = profiles
}

仅供参考，第二种方法非常受欢迎，甚至Laracast也使用这种技术。 :)这是link to the podcast。

我也认为the laracast vue tutorial谈到了使用这种方法。

我希望有所帮助。

如何将刀片变量传递给vue实例，以便在JavaScript文件中使用它？

1 个答案: