0

I try to pass simple php variable to Vuejs component. I found similar problem but solution does't work for me. How to pass a PHP variable to Vue component instance in Laravel blade?

App:

new Vue({
    el: '#app',
    components: { Home },
    template: "<Home />"
})

Home component:

<template>
  <div>
    <Header :userId="$phpUserId"></Header>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
export default {
  name: "Home",
  components: {
    Header
  }
};
</script>

Header component:

<template>
  <header>
    <div>number : {{this.userId}}</div>
  </header>
</template>


<script>
export default {
  name: "Header",
  props: [
    {
      name: "userId",
      default: 0
    }
  ]
};
</script>

PHP simple page:

...
<body>
    <?php $phpUserId = 123; ?>
    <div id="app"></div>
</body>
...

Any solution for this problem? I'm new in vuejs :(

Ale
  • 61
  • 1
  • 2
  • The other answer should still be valid. Just change `{{ $client->id }}` (which is the only Blade/Laravel-specific code) with `= $client->id ?>` – M. Eriksson Dec 13 '19 at 12:39
  • I don't use Laravel, just simple PHP. @deceze - this is not the same problem. This is vuejs problem - so, please don't close this question and open it. – Ale Dec 13 '19 at 14:02
  • Vue is Javascript. PHP is PHP. There's no fundamental difference. The duplicate still applies. If you think it doesn't, specifically explain *why*. – deceze Dec 13 '19 at 14:05
  • @deceze - Because Vue is framework and my question is about feature of that framework witch should work but in my case it doesn't. My app is bandle by webpack, so I can't put in my script tag. So, please re-open this thread because someone who uses and knows Vue may have something important to convey that can help me solve my problem. – Ale Dec 13 '19 at 14:27
  • Yeah, so use [one of the other solutions](https://stackoverflow.com/a/23740549/476), like *AJAX*. – deceze Dec 13 '19 at 14:31
  • There really aren't many options here. Either you can `echo` the value directly into your Javascript with PHP; we established you can't, and it's not the best option to begin with. Or you can `echo` something into the HTML served by your server, if PHP outputs that HTML. If both of those aren't possible, then you can only fetch the value from the server via AJAX and pass it around your script (Vue) as necessary. – deceze Dec 13 '19 at 14:33
  • @deceze - The solution I gave (https://stackoverflow.com/questions/41520258/how-to-pass-a-php-variable-to-vue-component-instance-in-laravel-blade) works fine (without echo and ajax) for lower versions of Vue, but the higher version does't work because the binding has changed in new version. How many times do I have to tell you that I don't want to reinvent the wheel, just take advantage of the functionality that worked on older versions of Vue. Why are you so stubborn? – Ale Dec 13 '19 at 15:01
  • Update your question with all those details! And currently you're not passing anything from PHP to HTML/JS. `` doesn't do anything. `:userId="$phpUserId"` has no meaning in Vue. You're missing an `echo` from PHP into HTML *somewhere*. Get the basics of how HTML interacts with PHP straight first. If you then have another Vue-specific issue with passing a value through Vue components, that's a separate problem. – deceze Dec 13 '19 at 15:06

0 Answers0