Auth::user() - property or method "{username}" is not defined [Vue, Laravel]

Question

I use <users-component :user-name={{ Auth::user()->name }}></users-component> inside my example.blade.php file (users-component is a Vue component) and inside of users-component I have a code:

<template> 
  <div>
   <button v-on:click="sendMessage">sendMessage()</button> 
  </div>
</template>

<script>
export default {
  data(){
    return{
      messageText: ''
    }
  },
  props: {
    userName: String
  },
  methods:{
    sendMessage(){
      this.$emit('messagesent', {
        message:this.messageText,
        user: {
          name: this.userName
        }
      });
      this.messageText = '';
    }
  }
}
</script>

After click in my button "sendMessage()" I have an error:

[Vue warn]: Property or method "agnieszka" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

How can I fix it?

"agnieszka" is a logged user name, I think I am passing it to vue component in <users-component :user-name={{ Auth::user()->name }}></users-component> — sailormoon
– sailormoon, Commented Oct 25, 2018 at 9:26

tony19 · Accepted Answer · 2022-07-16 00:29:22Z

1

My previous idea was a bit off, but the real issue is that You're binding the property user-name with v-bind's shorthand. If You only want to provide a static value to the component, then just remove the : from the property name.

<users-component user-name="{{ Auth::user()->name }}"></users-component>

td,dr: Writing the property as :user-name the Vue template engine interprets this as below:

<users-component v-bind:user-name="{{ Auth::user()->name }}"></users-component>

and expects a variable, that has the name of Auth::user()->name.

Vue docs: v-bind Shorthand

edited Jul 16, 2022 at 0:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 25, 2018 at 9:47

Tomi

711 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shailendra Gupta · Accepted Answer · 2018-10-25 10:10:30Z

1

I think the problem is here

methods:{
  sendMessage(){
    this.$emit('messagesent', {
      message:this.messageText,
      user: {
        name: this.userName
      }
    });
    this.messageText = '';
  }
}

and

<users-component user-name="{{ Auth::user()->name }}"></users-component>

edited Oct 25, 2018 at 10:10

answered Oct 25, 2018 at 9:34

Shailendra Gupta

1,1207 silver badges16 bronze badges

1 Comment

sailormoon Over a year ago

Unfortunately it not helps.

Collectives™ on Stack Overflow

Auth::user() - property or method "{username}" is not defined [Vue, Laravel]

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related