php

laravel

vue.js

vuejs2

How to pass a PHP variable to Vue component instance in Laravel blade?

Viewed 951 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

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.

Saturday, September 24, 2022

φxocę_웃_пepeúpa_ツ

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:

To generate whole js code from PHP along with all it's variables. Much like to how you generate HTML.
To request some variable from JS running in a browser, using AJAX technique.

Wednesday, November 2, 2022

tkounenis

If you use the Laravel app with Vue.js included in it, you don't need to run npm run dev.

In your case, you seem to have a decoupled frontend and backend. In that case, you don't really have the choice to host 2 different ports or hostname.

You can use the same port if you use a different domain. For example, you can use mydomain.com for the frontend and use api.mydomain.com for the backend/api.

Assuming you have a webpack frontend project, you can do npm run build, which will compile all your files to static html files in the dist folder. You then only need to point your host configuration file to this folder.

Thursday, August 4, 2022

joseph_toronto

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>

Tuesday, November 15, 2022

vikas_rathore

You can change your model of data adding a new layer. For example:

  data() {
    return {
      currentStudent: {
        first_name: '',
        last_name: '',
        student_number: '',
        phone_number: '',
        email: '',
        birth_date: '',
        school_name: '',
      }
    }
  },

Then in created you can use simple

  created() {
    this.currentStudent = this.student;
    this.currentStudent.birth_date = moment(this.student.birth_date).format('YYYY-MM-DD');
  },

And in all component replace names by names with currentStudne eg in v-models:

first_name -> currentStudne.first_name

You can also read about Vue.$set

https://vuejs.org/v2/guide/reactivity.html

Saturday, November 5, 2022

user3237465

Only authorized users can answer the search term. Please sign in first, or register a free account.

Not the answer you're looking for? Browse other questions tagged :

php

laravel

vue.js

vuejs2

How to pass a PHP variable to Vue component instance in Laravel blade?

Answers

php,laravel,vue.js,vuejs2