Pass data from blade to vue component

3
votes

I'm trying to learn vue and with that I want to integrate it with laravel too.. I simply want to send the user id from blade to vue component so I can perform a put request there. Let's say I have this in blade:

<example></example>

How can I send Auth::user()->id into this component and use it.

I kept searching for this but couldn't find an answer that will make this clear.

Thanks!

5
laravelvue.js
Simply you can take this in your blade: <span hashid="{{ Auth::user()->id }}"></span> and in your vue component do like: <script> export default { data: function () { return { hashid: '' } } } </script> and console it anywhere, it'll give you auth id! – Hiren Gohel
this might be usefull for you, its a free series about vue/laravel vuecasts.com – Christophvh
You can pass some variables by making them globally acessible in the window object, so in your app.blade.php have like a script tag defining a variable and then its easy to access it. though i would recomend looking at vue and front end as a separeted like an app that gets info through requests and JWT authentication – Sérgio Reis

5 Answers

12
votes

To pass down data to your components you can use props. Find more info about props over here. This is also a good source for defining those props.

You can do something like:

<example :userId="{{ Auth::user()->id }}"></example>

OR 

<example v-bind:userId="{{ Auth::user()->id }}"></example>

And then in your Example.vue file you have to define your prop. Then you can access it by this.userId.

Like :

<script>
  export default {
    props: ['userId'],
    mounted () {
      // Do something useful with the data in the template
      console.dir(this.userId)
    }
  }
</script>
2
votes

If you are serving files through Laravel

Then here is the trick that you can apply.

In Your app.blade.php

@if(auth()->check())
<script>
    window.User = {!! auth()->user()  !!}
</script>
@endif

Now you can access User Object which available globally

Hope this helps.

0
votes

Calling component,

<example :user-id="{{ Auth::user()->id }}"></example>

In component,

<script>
    export default {
        props: ['userId'],
        mounted () {
            console.log(userId)
        }
    }
</script>

Note - When adding value to prop userId you need to use user-id instead of using camel case.

0
votes

https://laravel.com/docs/8.x/blade#blade-and-javascript-frameworks

Rendering JSON

Sometimes you may pass an array to your view with the intention of rendering it as JSON in order to initialize a JavaScript variable. For example:

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

However, instead of manually calling json_encode, you may use the @json Blade directive. The @json directive accepts the same arguments as PHP's json_encode function. By default, the @json directive calls the json_encode function with the JSON_HEX_TAG, JSON_HEX_APOS, JSON_HEX_AMP, and JSON_HEX_QUOT flags:

<script>
    var app = @json($array);

    var app = @json($array, JSON_PRETTY_PRINT);
</script>
-1
votes

Just to add for those who still get error. For me this <askquestionmodal :product="{{ $item->title }}"></askquestionmodal> still gives error in console and instead showing html page I saw white screen.

[Vue warn]: Error compiling template:
invalid expression: Unexpected identifier in
    Coupling to connect 2 rods М14 CF-10
  Raw expression: :product="Coupling to connect 2 rods М14 CF-10"

Though in error I can see that $item->title is replaced with its value. So then I tried to do like that <askquestionmodal :product="'{{ $item->title }}'"></askquestionmodal>

And I have fully working code.

/components/askquestionmodal.vue

<template>
  <div class="modal-body">
    <p>{{ product }}</p>
  </div>
</template>

<script>
    export default {
        name: "AskQuestionModal",
        props: ['product'],
        mounted() {
           console.log('AskQuestionModal component mounted.')
        }
    }
</script>