ブレード変数をvueインスタンスに渡してJavaScriptファイルで使用できるようにするにはどうすればよいですか？

Question

私は、アプリケーションのすべてのロールに権限のセットがあるアクセスコントロールリストを作成しています。私は、チェックボックスのリストを表示するロール編集ページを作成しようとしています。選択されたボックスは、ロールがすでに持っている権限になります。 JavaScriptファイルからアクセスしたいロールに関連付けられた一連のアクセス許可があります。つまり、私はVueインスタンスからアクセスしたい配列$role->permissions->pluck('name'))を持っています。次に、このインスタンスから、permissionsSelectedというプロパティをブレードファイルのチェックボックスにバインドします。これは私の編集ページです。

@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 

Edit.blade.php

を（私はタグ<b-checkbox></b-checkbox>ので、チェックボックスのためのUIコンポーネントBuefyを使用しています）これは私のJavaScriptでVueのインスタンスがApp.js

ファイルであります

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にデータを取得する方法は2通りあります。

1. ネットワークコールを使用する。残りのエンドポイントを公開し、ヒットして データを取得します。これは理想的なケースですが、多くの余分な作業が必要です

2. data attributesを使用してデータを渡すと、私はあなたの場合はこれを使用したいと思います。だから私たちはこれをどのようにすることができますか

最初に、HTML要素にIDを追加する必要があります。次に、データ属性を追加します。次に、ブレードテンプレートを使用してデータをjsonとして解析し、データ属性をこれに設定します。次に、vueの作成/マウントされたフックでデータを抽出し、状態に設定します。

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

私はブレードとPHP構文を認識していないよP.SのでsomeVar.jsonが正しくない可能性があります。

vueマウントフックでは、このようなことを行います。

2番目の方法は非常に一般的で、Laracastでもこの手法を使用しています。 :) link to the podcastはここにあります。

私もこの方法を使用してthe laracast vue tutorial話すと思います。

私は役立つことを願っています。