javascript - 如何将 blade 变量传递给 vue 实例以便我可以在我的 JavaScript 文件中使用它？

Question

我正在构建一个访问控制列表，其中应用程序中的每个 Angular 色都将拥有一组权限。我正在尝试创建一个编辑 Angular 色页面，该页面将显示一个复选框列表，并且选中的框将是该 Angular 色已经拥有的权限。我有一组与我想从我的 JavaScript 文件访问的 Angular 色关联的权限。也就是说，我有一个数组 $role->permissions->pluck('name'))我想从我的 Vue 实例访问它。然后从此实例绑定(bind)属性 permissionsSelected到我的 Blade 文件中的复选框。这是我的编辑页面。 (我将 UI 组件 Buefy 用于复选框，因此标签 <b-checkbox></b-checkbox> )

编辑.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);
    }
  }
 });

我希望能够做这样的事情 permissionsSelected: {!!$role->permissions->pluck('id')!!}在我的 JS 文件中。我该如何解决这个问题？

Answer 1

有两种方法可以从 Php 获取数据到 Vue。

1. 使用网络电话。公开一个休息端点，点击它并获得数据。这是理想情况，但涉及大量额外工作

2. 使用 data attributes 传递数据，我想在你的情况下你会想要使用它。那么我们该怎么做呢？

首先我们应该给 HTML 元素添加一个 id。然后给它添加一个数据属性。然后使用 Blade 模板将您的数据解析为 json 并将数据属性设置为此。然后在vue的created/mounted钩子(Hook)中提取数据并设置状态。

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

P.S 我不知道 blade 和 PHP 语法，所以 someVar.json 可能不正确。

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

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谈论使用这种方法。

希望对您有所帮助。