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 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!

Answer 1

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>