Auth :: user () - свойство или метод "{username}" не определены [Vue, Laravel]

Question

Я использую <users-component :user-name={{ Auth::user()->name }}></users-component> внутри моего example.blade.php файла (user-component является компонентом Vue) и внутри users-component У меня есть код:

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

После нажатия на кнопку «sendMessage»() «У меня ошибка:

[Vue warn]: свойство или метод« agnieszka »не определены в экземпляре, но на них ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Как это исправить?

Answer 1

Моя предыдущая идея была несколько ошибочной, но реальная проблема в том, что вы связываете свойство user-name с сокращением v-bind.Если вы хотите предоставить статическое значение только для компонента, просто удалите : из имени свойства.

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

td, dr : запись свойства как :user-name механизм шаблонов Vue интерпретирует это следующим образом:

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

и ожидает переменную с именем Auth::user()->name.

Документы Vue: Сокращение v-bind

Answer 2

Я думаю, что проблема здесь

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

и

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