How to get User Object of Currently Logged User in Vue Component

1
votes

I am new to Laravel and Vue Js. I need to get the Currently Logged User Object in the Vue Component. How can I get it? Please give me an answer as soon as possible.

I have tried to pass the User object in the blade file when calling to Vue component as follows and it did not work.

<section id="vue-app">
    <add-new-address :userName={{ Auth::user()->name }}></add-new-address>
</section>

As well as I used it in Vue component as follows,

 props: {
    userName: this.userName ,
  }

Retrieved it to input field as follows,

<input class="mdc-text-field__input" required="" v-model="userName" name="fname" type="text" >

this is the my vue component

**<template>
  <div class="row" id="addNewtAddress">
          <input class="mdc-text-field__input" required="" id="fname" name="fname" v-model="name" type="text" >
    </div>
</template>
<script>
export default {
  name: "AddNewAddress",

  props:['name'],

  data(){
    return{
    }
  }
}
</script>**
1
phplaravelvue.jsvue-component

1 Answers

0
votes

use json_encode and send prop as json object, like this

blade

<section id="vue-app">
    <add-new-address name={{ Auth::user()->name }}></add-new-address>
</section>

vue

props:['name']

ref link https://vuejs.org/v2/guide/components-props.html