Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined in Laravel & vue.js答案

【问题标题】：Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined in Laravel & vue.jsUncaught (in promise) TypeError: Cannot read property 'forEach' of undefined in Laravel & vue.js
【发布时间】：2018-05-07 13:14:16
【问题描述】：

您好朋友，当我使用 vue.js 和 Laravel 计算通知长度时，我厌倦了收到此错误，它显示错误，未捕获（承诺）类型错误：无法读取未定义的属性 'forEach' 请帮助我。这是我的代码。

store.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export const store = new Vuex.Store({
state: {
    nots: []

},
getters: {
    all_nots(state) {
          return state.nots
    },
    all_nots_count(state) {
          return state.nots.length
    },

},
mutations: {
    add_not(state, not) {
          state.nots.push(not)
    },
}
})

UnreadNots.vue

<template>
  <li>
        <a href="/notifications">
              Unread notifications
              <span class="badge">{{ all_nots_count }}</span>
        </a>
  </li>
  </template>
 <script>
  export default {
        mounted() {
              this.get_unread()
        },
         methods: {
              get_unread() {
                    this.$http.get('/get_unread')
                        .then( (nots) => {
                              nots.body.forEach( (not) => {
                                    this.$store.commit('add_not', not)
                              })
                        })
              }
        },
        computed: {
              all_nots_count() {
               return this.$store.getters.all_nots_count
              }
        }

    }
</script>

web.php

Route::get('get_unread', function(){
    return Auth::user()->unreadNotification;
  });

【问题讨论】：

只有console.log(nots)，很明显它没有body
我得到了空白数据
是的，那告诉你什么？您的服务器可能没有发送任何内容。检查浏览器控制台中的网络选项卡并查看调用返回的内容
请截图/get_unread返回的内容。您可以在浏览器或邮递员中打开它。

标签： php laravel vue.js pusher

【解决方案1】：

为避免该错误，您需要测试您的返回值以确保它具有您所期望的一切。

if(nots && nots.body && nots.body.length){
    nots.body.forEach( (not) => {
       this.$store.commit('add_not', not)
    })
}

【讨论】：

当然。那是另一个问题。您将需要在您的 api 中四处寻找，看看为什么没有数据返回。
提供更多内容来支持你的答案，仅仅添加一个代码sn-p似乎不是一个好的答案。

【解决方案2】：

您收到此错误是因为 forEach 需要一个数组。它是未定义的。从错误中可以清楚地看出这一点。

解决此问题的一种可能方法是检查 nots.body 是否是一个数组并且有项目。

this.$http.get('/get_unread')
    .then(nots => {
        if (Array.isArray(nots.body) && nots.body.length) {
            nots.body.forEach(not => {
                this.$store.commit('add_not', not)
            })
        }
    })

另一个提示是不要在您的网址中使用下划线。例如，谷歌会将下划线分隔的单词视为一个单词，但对于连字符，他们会将其视为两个单词。 get_unread 应该是 get-unread。这可能不是什么大问题，但如果您对其他网址（如 my_blog_title）执行此操作，那么问题就更大了。

这样的通知更好的解决方案是像http://mywebsite.com/user/notifications/unread这样的REST风格的方法

【讨论】：

all_nots_count:0 为什么会这样？
因为您没有从服务器返回任何数据，所以当它尝试forEach 他们时，他们试图 foreach undefined 而不是数组中的任何项目。这就是它失败的原因。这不是 vue 问题，而是您的后端的问题。试试dd(Auth::user()->unreadNotification)（确定不是unreadNotifications？）
我在路线中使用过
我不明白你在说什么，或者你是否明白我所说的
我在 web.php 中使用过，就像 return Auth::user()->unreadNotifications;

【解决方案3】：

不要使用 nots.body 使用 nots.data。我在 5 分钟前遇到了同样的问题

【讨论】：