how to access data ($count) from laravel controller to vue component

Question

I want to access a variable $count from my controller and access it to a vue component (frontend). currently have this code on my controller:

public function index()
{
    $count = User::where('created_at', Carbon::today())->count();
    return view('user.index', compact('count'));
}

i am quite new to laravel and vuejs so please help me out. thank you!

Answer 1

Send count as a prop from blade to component

<your-component-name :count="{{ $count }}"></your-component-name>

And from your component, receive that prop

<template>
    <div>
        Count is {{ count }}
    </div>
</template>

<script>
export default {
    props: {
        count: {
            type: Number
        }
    }
}
</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>

the above question was answered in below question Pass data from blade to vue component