Question

我在<users-component :user-name={{ Auth::user()->name }}></users-component>文件中使用了example.blade.php（users-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警告]：在实例上未定义属性或方法“ agnieszka”，但在渲染期间引用。确保此属性是反应性的，在data选项中或对于基于类的组件，通过初始化属性。

我该如何解决？

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 Shorthand

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>

Auth :: user（）-属性或方法“ {username}”未定义[Vue，Laravel]

2 个答案: