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 }"
_
しかし、それは機能しません。
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 }}
を使用する必要があります。
私はちょうどこれをやったし、それは私にとって素晴らしい仕事です。 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
を介して実行されます。エンコードされていないデータが必要な場合(この場合)、_{!! !!}
_を使用します
このスレッドに出くわし、まだエラーが発生している人は、上記の回答は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>