vue.js - 从 auth 端点返回的 JSON 无效，但状态码为 200

Question

我在将事件广播输出到前端时遇到问题。我的设置是带有 vue.js 包装的 Laravel 8 + Inertia.js 脚手架。

一切似乎都在检查后端。事件被广播并被监听，触发通知被广播。使用 Laravel Telescope，我可以看到事件、监听器和通知的详细信息。

我创建了一个“广播消息组件”来处理从 Laravel 回显接收数据并将其导入到将显示消息的页面中。尽管构建过程没有引发任何错误，但前端没有输出任何消息，并且我在控制台日志中收到无效的 JSON 错误消息以及来自我的索引 html 文件的原始 html 代码。

Pusher仪表板还确认成功连接和发送消息。控制台上的 Pusher 日志也​​显示连接成功但没有消息和订阅错误消息。

这是我的主要 js 文件：

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';


const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => import(`./Pages/${name}`).then(module => module.default),
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

还有我的 bootstrap.js 文件：

window._ = require('lodash');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**js
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    forceTLS: true
});

这是我没有通知方面的广播消息组件文件，我在实现接收通知消息之前直接测试接收事件：

<template>
    <div v-show="show">
        {{ body }}
    </div>
</template>

<script>
export default {
    props: ['message'],

    data() {
        return {
            body: '',
            show: false,
        }
    },
    mounted() {
        Echo.private('user.${this.user.id}')
            .listen('TradingAccountActivation', (e) => {
                this.message ({
                body: e.message,
                show: true
            })
                console.log(this.message)
            });
        }
}
</script>

这是向用户显示消息的页面：

<template>
    <breeze-authenticated-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>  
            <div>
              <broadcast-message :message="'{{ json_encode($message) }}'"></broadcast-message>
            </div>
           </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 bg-hite border-b border-gray-200">
                        You're logged in!
                    </div>
                </div>
            </div>
        </div>
    </breeze-authenticated-layout>
</template>

<script>
    import BreezeAuthenticatedLayout from '@/Layouts/Authenticated';
    import BroadcastMessage from '@/Components/BroadcastMessage';
      
    export default {
        name: "Dashboard",
        components: {
            BreezeAuthenticatedLayout,
            BroadcastMessage,
           }
</script>

我怀疑问题出在我的广播组件上，但不知道如何解决。谢谢

标签： vue.jscomponentslaravel-8laravel-echoinertiajs