web-dev-qa-db-ja.com

PHP変数をVueコンポーネントインスタンスLaravelブレード？

PHP変数をVueコンポーネントのLaravel=ブレードファイルに渡すにはどうすればよいですか？

私の例では、インラインテンプレートclient-detailsがあり、このビューをLaravelから取得しているので、_idというURL _/client/1_をVueインスタンス。

Laravelによってロードされる私のコンポーネントは次のようになります。

_<client-details inline-template>
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>
_

およびによってマウントされた：

_Vue.component('client-details', {
    data(){
        return {
            clientId: null
        }
    },
);
_

私はすでにのようにしようとしました

_:clientId="{{ $client->id }"
_

しかし、それは機能しません。

phplaravelvue.jsvuejs2
23
mastercheef85

Vueのpropsを使用して、マークアップを介してVueのコンポーネントに属性を渡す必要があります。次の例を見てください。

<client-details inline-template client-id="{{ $client->id }}">
    <div id="client-details" class="">
          My HTML stuff
    </div>
</client-details>

Vueコンポーネント：

Vue.component('client-details', {
    props: [
        {
            name: 'clientId',
            default:0,
        }
    ]
});

これで、Vueコンポーネントの別の部分で、this.clientIdとしてこの値にアクセスできます。

問題の詳細

HTMLでは、属性名をkebab-caseに書き込みますが、Vue sideに書き込みますcamelCase。 公式ドキュメントはこちら に詳細があります。

また、Vueのv-bindの短縮形を:clientId="{{ $client->id }}"で使用しているため、Vueは二重引用符内のすべてをJavaScript式として処理するため、その場合はエラーが発生する可能性があります代わりに、コロンなしでこの形式clientId="{{ $client->id }}を使用する必要があります。

30
Mustafa Ehsan

私はちょうどこれをやったし、それは私にとって素晴らしい仕事です。 Laravel 5.4およびVue 2.x.

私のコンポーネントでは、オブジェクトのプロパティ（props）を宣言します。

_props: ['currentUser'],_

コンポーネントがインスタンス化されるブレードページで：

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

コンポーネントでは、currentUserにcamelCaseを使用していますが、htmlでは大文字と小文字が区別されないため、kebab-case（したがって、「現在のユーザー」）を使用する必要があります。

また、ブレード構文_{{ }}_を使用する場合、その間のデータはphp htmlspecialcharsを介して実行されます。エンコードされていないデータが必要な場合（この場合）、_{!! !!}_を使用します

11
Hawkeye64

このスレッドに出くわし、まだエラーが発生している人は、上記の回答はMustafa Ehsanによって正しく与えられていますが、説明はされていません。試行錯誤の末、私はそれを見ました。

Newuser.blade.phpの私のコンポーネント

<access-request
       firstname="{{ $newuser->firstname }}"
       lastname="{{ $newuser->lastname }}"
       accessid="{{ $newuser->id }}"
>
</access-request>

使用されるバインディング方法に注意することが非常に重要です。上記のコンポーネントでは、データバインディングの名前（React props）など）のみを記述し、コンポーネントpropsに登録しました（以下を参照）。もう1つは、Vue小道具を渡す方法はv-bind：または：を使用する方法ですが、二重引用符と単一引用符の両方を使用する必要があります。引用符：

:firstname="'{{ $newuser->firstname }}'"

両方の引用符がないと、Vue警告が表示されます。

AccessRequest.vue：

<template>
   <div class="component">
        <h3 class="">{{ firstname }} {{ lastname }}</h3>
        <p>Access ID: {{ accessid }}</p>
        <label for="administrator">Grant Administrator Priviledges:</label>
        <input name="administrator" type="checkbox" value="True" class="mb-5"><br>
        <button type="submit" class="btn btn-success">Add</button>
        <button type="submit" class="btn btn-danger">Delete</button>
        <hr>
   </div>
</template>

<script>
  export default {
    name: "AccessRequest",
    props: ['firstname', 'lastname', 'accessid'],
  }
</script>
1
Jonathan Whittle