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

我正在构建一个访问控制列表，其中应用程序中的每个角色都有一组权限。我正在尝试创建一个编辑角色页面，该页面将显示一个复选框列表，所选框将是该角色已经拥有的权限。我有一个与角色关联的权限数组，我想从JavaScript文件访问该角色。也就是说，我有一个数组

$role->permissions->pull（'name'））

，我想从我的Vue实例访问它。然后在此实例中，将属性

权限selected

绑定到我的刀片文件中的复选框。这是我的编辑页面。（我使用UI组件Buefy作为复选框，因此标记为

）

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

---

我希望能够在我的JS文件中执行类似以下

权限选择：{！！$role->permissions->pull（'id'）！！}

。如何解决这个问题？

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

使用网络呼叫。暴露rest端点，点击它并获取 数据。这是一个理想的情况，但需要做很多额外的工作

使用传递数据，我认为在您的情况下，您会希望使用此。那我们怎么做呢

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

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

仅供参考，第二种方法非常流行，甚至Laracast也使用这种技术这是你的电话号码

我也认为我们谈论使用这种方法

---

我希望这会有所帮助。

使用。答案是除非你有非常、非常、非常好的理由这样做，否则不要这样做。这有点像在编译过程中询问如何编写将值注入C#文件的C。不要这样做。那是一次悲惨的经历，每个人都因此而受伤。使其模块化。从另一个服务调用一个服务。根据服务合同要求提供所需数据。在JS世界中，这意味着Ajax调用或服务器呈现的模板（使用Vue自己的SSR，而不是通过单独的语言使用dynamic code gen），服务器在其中加载数据。简言之：你不应该这样做，但如果没有其他方法（提示：有，已经说过），你可以用JSON呈现数据<代码>权限选择：{！！json_encode（$role->permissions->pull（'id'））！！}应该这样做。@Jhecht谢谢你的评论。但是我不能从JavaScript文件访问PHP变量啊，我误解了——我以为这是在你的

.blade.PHP

文件中写的；那么答案就是你必须使用一个API端点。谢谢你的回答，这是可行的。但是我不明白最后一行是什么，我更新了我的答案。this.profile将是一个名为profile的状态。因此，我将从数据属性收集的数据设置为状态。这将触发基于此新数据的视图更新。

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

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