Pass data from blade to vue component

Question

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

Answer 1

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>

Answer 2

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>

Answer 3

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.

Answer 4

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.