Laravel Vue 网络通知组件错误

Posted 2023-02-22

【中文标题】Laravel Vue 网络通知组件错误

【英文标题】：Laravel Vue web-notification component errors

【发布时间】：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

【参考方案1】：

在 app.blade 中试试这个：

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




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