How to pass a PHP variable to an instance of a Vue component?

Question

How to pass a variable value to a vue component?

In my example, I have built-in information about the template client, I get this view from laravel , so now I want to pass the identifier that comes with the URL /client/1 to my vue instance.

My component loaded by laravel looks like this:

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

and installed:

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

I've already tried both

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

but that will not work.

Answer 1

You must use Vue props to be able to pass attributes to Vue components through markup. Take a look at the following example:

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

In the Vue component:

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

Now in other parts of your Vue component, you can access this value as this.clientId .

Note that in HTML we write the attribute name in the kebab case , but in the Vue side we write it in camelCase . Read more in white papers here .

Answer 2

I just did it and it works great for me. Using Laravel 5.4 and Vue 2.x.

In my component, declare a property (attribute) for an object:

props: ['currentUser'],

On my click page, where the component is instantiated:

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

Please note that in the component I use camelCase for currentUser , but since html is case insensitive, you should use kebab-case (thus, "current user").

Also note that if you use the syntax of the blade {{ }} , then the data between them is launched through php htmlspecialchars . if you want to receive unencrypted data (which in this case you would), use {!! !!} {!! !!}

Answer 3

For anyone who encounters this topic and still gets errors, the answer is correctly given above by Mustafa Ehsan, but not explained. The trial and error method helped me see this.

My component in newuser.blade.php

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

It is very important to note the binding method used. On the aforementioned component, I wrote only the name of the data binding (for example, React details), and then registered it with the component details (see below). This is how Mustafa wrote his answer in his answer and works great. Another, more convenient way to pass props is v-bind: or:, but you must make sure that you use both double and single quotes:

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

Without both quotes, you will receive Vue warnings.

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> 

Answer 4

I had to pass some server data to my Vue component, I finished creating the $server_data variable in the controller and passed it to the json script tag.

In the controller:

 $server_data = json_encode([ "some-data" => SomeObject::all() ]); return View::make('myview', compact('server_data')); 

In the template:

 <script type="application/json" name="server-data"> {{ $server_data }} </script> <!-- Inserts server data into window.server_data --> <script> var json = document.getElementsByName("server-data")[0].innerHTML; var server_data = JSON.parse(json); </script> 

In vue initialization, I put a computed property:

 computed: { 'server_data': function(){ return window.server_data; } } 

Data is then available in the component template using server_data.some_object .

This allows you to transfer a lot of structured data without the need for many html attributes. Another advantage is that data is dumped with json encoding. This avoids possible errors with variables that contain double quotation marks ("), which will ruin the dom.