Asked  7 Months ago    Answers:  5   Viewed   131 times

How can I pass a value of a PHP variable to a Vue component in Laravel blade files?

In my example, I have an inline template client-details, I get this view from Laravel so now I want to pass the id which comes with the url /client/1 to my Vue instance.

My component, which is loaded by Laravel, looks like:

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

and mounted by:

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

I already tried like

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

but it does not work.

 Answers

96

You have to use Vue's props to be able to pass attributes to Vue's 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 your 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.

Issue Details

Please note that in HTML we write attribute name in kebab-case but in Vue side we write it in camelCase. More info in official docs here.

Also, you are using Vue's v-bind shorthand in :clientId="{{ $client->id }}" which means that Vue will deal anything inside double quotes as a JavaScript expression, therefore you may get errors in that case as well. Instead, you should use this format clientId="{{ $client->id }} without a colon.

Wednesday, March 31, 2021
 
John_BSDthos
answered 7 Months ago
56

You cannot actually "pass" a variable anywhere. But only a scalar value. Frankly, you can pass only text data.
So, in case of javascript you have 2 options:

  1. To generate whole js code from PHP along with all it's variables. Much like to how you generate HTML.

  2. To request some variable from JS running in a browser, using AJAX technique.

Wednesday, March 31, 2021
 
jakubos
answered 7 Months ago
65

When you display your data try like this:

authenticated.employee && authenticated.employee.name

or

authenticated.employee ? authenticated.employee.name : ''

This is because in moment authenticated.employee is not defined.

With that error will disappear.

You can read more here about that.

Saturday, May 29, 2021
 
dzm
answered 5 Months ago
dzm
53

Bind href in vuejs as :href or v-bind:href

<a :href="'/invoice/'+invoice.id+'/history'" />

Check below example

var V = new Vue({
  el:"#app",
  data:{
    invoice:{id:111}
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<div id="app">
<a :title="'/invoice/'+invoice.id+'/history'" :href="'/invoice/'+invoice.id+'/history'">Hover me to check href value</a>
</div>

Here is the example with child component value assinged by props

var Child = {
  template:`<div>Child component : <a :title="'/invoice/'+invoice.id+'/history'" :href="'/invoice/'+invoice.id+'/history'">Hover me to check href value</a></div>`,
  props:['invoice'],
}
var V = new Vue({
  el:"#app",
  data:{
    invoice:{id:111}
  },
  components:{
    Child
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.js"></script>
<div id="app">

<child :invoice="invoice"></child>
</div>
Saturday, May 29, 2021
 
redrom
answered 5 Months ago
52

Did you write

window.Echo.private('channelName').listen('EventName',function(e){
})

in your application to listen

Saturday, May 29, 2021
 
DiglettPotato
answered 5 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :