Laravel Vue 网络通知组件错误答案

【问题标题】：Laravel Vue web-notification component errorsLaravel Vue 网络通知组件错误
【发布时间】：2019-05-03 08:26:14
【问题描述】：

我正在尝试显示从组件 vue 到 layout/app.blade 的通知栏，但控制台中出现错误。

[Vue 警告]：创建钩子时出错：“TypeError: Cannot read property 'userId' of undefined”

和，

TypeError: 无法读取未定义的属性“userId”

我的 app.js 如下所示。

require('./bootstrap');
window.Vue = require('vue');
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');

Vue.component('estate', require('./components/EstateNotification.vue'));

const app = new Vue({
    el: '#app',
    data: {
        estates: '',
    },
    created(){
      if (window.Laravel.userId){
          axios.post('/notification/estate/notification').then(response => {
              this.estates = response.data;
              console.log(response.data)
          });

          Echo.private('App.User.'+ window.Laravel.userId).notification((response) => {
              data = {"data":response};
              this.estates.push(data);
              console.log(response);
          });
      }
    }
});

在我的路线中：

Route::post('/notification/estate/notification', 'EstateController@notification');

控制器：

public function notification()
    {
        return auth()->user()->unreadNotifications;
    }

但我想不通，为什么 userId 未定义？我在哪里做错了？非常感谢您的帮助！

【问题讨论】：

表示window.Laravel 为空。你在刀片<script>window.Laravel = {!! json_encode(some object with userId) !!}</script> 中输出了吗？这只是您的第一个错误。我在您的代码中看到更多错误。就像v-for="estate in estates" 不是你所拥有的，这是相反的。
其实我对 vue 并不陌生。但也不能为空。我犯了一些语法错误吗？
你做了这个if (window.Laravel.userId)，它不是真正的 vue，它是 javascript。它期望有一个名为Laravel 的全局变量必须来自某个地方。您必须从blade 中的服务器输出它。
我修复了模板，重新设计了控制器和路由；但仍然得到未定义的用户 ID。我更新了有问题的代码。 @Noogen

标签： javascript php laravel vue.js vue-component

【解决方案1】：

在 app.blade 中试试这个：

<div id ="app">
    <estate v-bind:estates="estates"></estate>
</div>




const app = new Vue({
       el: '#app'  //this ID
   });

【讨论】：