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?

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

Answer 2

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