Vue 未监听事件

Question

我的 Vue 应用程序有问题。我正在尝试与推送器建立连接并使用 laravel echo 检索数据。我已经在后端安装并配置了所有东西，但前端无法正常工作。 这是我的 app.js 文件：

    import Echo from 'laravel-echo';
    
    window.Pusher = require('pusher-js');
    
    window.Echo = new Echo({
        broadcaster: 'pusher',
        key: 'mykey',
        wsHost: '127.0.0.1',
        wsPort: 6001,
        cluster: process.env.MIX_PUSHER_APP_CLUSTER,
        forceTLS: false,
        disableStats: true,
    });

    import './src/main.js'

这是我获取所有数据的文件，甚至是 post 方法，post 方法也坏了，但这很容易修复，问题是监听事件。

<template>
<div id="demo-basic-card">
<div class="vx-row">
  <div class="vx-col w-full sm:w-1/2 lg:w-1/3 mb-base">
                <vx-card class="globaxy-add p-2" @click="add = true, addButton = false">
                    <div class="text-center">

                    <div v-if="addButton" :style="{animation: 'fadeIn 1.3s'}">
                      <feather-icon icon="PlusIcon" class="p-10 inline-flex rounded-full globaxy-add-plus" :class="[`text-success`, {'mb-10': !iconRight}]" :style="{background: `rgba(var(--vs-success),.15)`}"></feather-icon>
                      <h4>Add New</h4>
                    </div>

                    <div v-if="add" :style="{animation: 'fadeIn 1s'}">
                    <form v-on:submit.prevent="submitForm">
                      <div class="vx-row">
                        <div class="vx-col sm:w-1/2 w-full mb-2">
                          <vs-input class="w-full" label-placeholder="Name" :value="addServer.name" :v-model="addServer.name" name="name"/>
                        </div>
                        <div class="vx-col sm:w-1/2 w-full mb-2">
                          <vs-input class="w-full" label-placeholder="IP" :value="addServer.ip" :v-model="addServer.ip" name="ip" />
                        </div>
                      </div>
                      <div class="vx-row">
                        <div class="vx-col sm:w-1/2 w-full mb-2">
                          <vs-input class="w-full" label-placeholder="Password" :value="addServer.password" :v-model="addServer.password" name="password"/>
                        </div>
                        <div class="vx-col sm:w-1/2 w-full mb-2">
                          <vs-input class="w-full" @keyup.enter="createServer" label-placeholder="User" :v-model="addServer.user" :value="addServer.user" name="user" />
                        </div>
                    
                      </div>
                  
                      <div class="vx-row">
                        <div class="vx-col w-full">
                     
                        </div>
                      </div>
                      </form>
                    </div>
                    </div>
                </vx-card>
    </div>
    <div class="vx-col w-full sm:w-1/2 lg:w-1/3 mb-base" v-for="device in adminServers" :key="device.id" :style="{animation: 'zoomIn ' +  (device.id * 0.3) + 's'}">
        <div class="display" @mouseover="hover = true" @mouseleave="hover = false">
                <vx-card class="globaxy-card p-2">
                    <router-link :to="'/administration/server/' + device.id"><vs-button v-if="hover" class="manage-server" radius color="primary" type="gradient" icon-pack="feather" :style="{animation: 'zoomIn 0.6s'}" icon="icon-edit"></vs-button></router-link>
                  <feather-icon icon="ServerIcon" class="p-5 inline-flex rounded-full" :class="[`text-success`, {'mb-4': !iconRight}]" :style="{background: `rgba(var(--vs-success),.15)`}"></feather-icon>
                    <div class="text-center">
                    <span class="device-name">{{ device.name }}</span>
                        <a target="_blank" rel="noopener noreferrer" :href="'http://' + device.domain"><h4>{{ device.domain }}</h4></a></h4>
                        <p class="text-grey">{{ device.ip }}</p>
                    </div>

                </vx-card>
            </div>
            </div>
    </div>
</div>
</template>

<script>
import { mapGetters } from "vuex";
import Administration from "@/http/Administration";

export default {
  data() {
    return {
      iconRight: false,
      addButton: true,
      hover: false,
      add: false,
      selected: [],
      'tableList': [
        'vs-th: Component',
        'vs-tr: Component',
        'vs-td: Component',
        'thread: Slot',
        'tbody: Slot',
        'header: Slot'
      ]
    }
  },
  computed: {
            ...mapGetters(["adminServers"]),
            ...mapGetters(["addServer"]),
        },

        mounted() {
          window.Echo.channel("addServer").listen(".server-created", e => {
            this.$store.commit("ADD_SERVER", e.server);
            this.addServer.name = "";
            this.addServer.ip = "";
            this.addServer.password = "";
            this.addServer.user = "";
          });
          console.log(window.Echo.channel("addServer").listen(".server-created"))
          this.$store.dispatch("GET_SERVERS");
        },
        

        methods:{
          createServer() {
            this.$store.dispatch("ADD_SERVER", this.addServer);
          },

        }
}

</script>

其他一切都配置得很好（我相信），因为除了实时捕获数据之外一切都正常。

当我运行“php artisan websockets:serve”时，控制台中的数据是这样返回的：

连接 id 442760083.70152140 发送消息 {"event":"log-message","channel":"private-websockets-dashboard-api-message","data":{"type":"api-message","time":"17:15 :26","详细信息":"频道： 添加服务器，事件： server-created","data":"{"servers":{"id":26,"name":"Test","ip":"12.2.223.1","user":"root","password ":"asdasdasdasda","domain":null,"mysql_password":null,"ssh_port":22,"ftp_port":null,"isActive":null,"created_at":"2021-01-07T17:15:26.000000 Z","updated_at":"2021-01-07T17:15:26.000000Z"}}"}}

当我 console.log 来自 pusher 的所有事件时，我有"

未捕获的类型错误：无法读取未定义的属性“应用” 在 Channel.Dispatcher.emit (app.js:69745) 在 Channel.handleEvent (app.js:70511) 在 app.js:72629 在 ConnectionManager.Dispatcher.emit (app.js:69745) 在消息 (app.js:71045) 在 Connection.Dispatcher.emit (app.js:69745) 在消息 (app.js:70302) 在 TransportConnection.Dispatcher.emit (app.js:69745) 在 TransportConnection.onMessage (app.js:69873) 在 WebSocket.socket.onmessage (app.js:69890) Dispatcher.emit @ app.js:69745 Channel.handleEvent @ app.js:70511 (匿名) @ app.js:72629 Dispatcher.emit@app.js:69745 消息@app.js:71045 Dispatcher.emit@app.js:69745 消息@app.js:70302 Dispatcher.emit @app.js:69745 TransportConnection.onMessage @app.js:69873 socket.onmessage @ app.js:69890 app.js:122971 [Vue 警告]：错误 渲染：“TypeError：无法读取未定义的属性'id'”

发现于

---> 在资源/js/src/views/Administration/Pages/Servers.vue 在资源/js/src/layouts/main/Main.vue 在资源/js/src/App.vue warn@app.js:122971 logError@app.js:124230 globalHandleError@app.js:124225 handleError@app.js:124185 vue._render@app.js:125890 updateComponent@app.js:126404 获取@ app.js:126815 运行@app.js:126890 flushSchedulerQueue@app.js:126648 （匿名）@app.js:124326 flushCallbacks@app.js:124252 Promise.then (async) timerFunc @ app.js:124279 nextTick @ app.js:124336 queueWatcher@app.js:126740 更新@app.js:126880 notify@app.js:123082 mutator@app.js:123234 ADD_SERVER @ app.js:163382 WrappedMutationHandler @ app.js:152624 commitIterator @ app.js:152246（匿名）@ app.js:152245 _withCommit@app.js:152404 commit@app.js:152244 boundCommit@app.js:152189（匿名）@91.js:98 Dispatcher.emit@app.js:69745 Channel.handleEvent@app.js:70511（匿名）@app.js:72629 Dispatcher.emit@app.js:69745 消息@app.js:71045 Dispatcher.emit @app.js:69745 消息@app.js:70302 Dispatcher.emit @app.js:69745 TransportConnection.onMessage@app.js:69873 socket.onmessage@ app.js:69890 app.js:124234 TypeError: 无法读取属性“id” 不明确的 在 91.js:346 在 Proxy.renderList (app.js:124974) 在 Proxy.render (91.js:342) 在 VueComponent.Vue._render (app.js:125888) 在 VueComponent.updateComponent (app.js:126404) 在 Watcher.get (app.js:126815) 在 Watcher.run (app.js:126890) 在 flushSchedulerQueue (app.js:126648) 在阵列。 (app.js:124326) 在flushCallbacks (app.js:124252)

可能是什么问题？

Answer 1

device.id is none 检查为什么这些属性没有定义