Javascript Vue未侦听事件

我的Vue应用程序有问题。我正在尝试连接到pusher并用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>

新增
{{device.name}
{{device.ip}
从“vuex”导入{mapGetters}；
从“@/http/Administration”导入管理；
导出默认值{
数据（）{
返回{
iconRight:错，
addButton：是的，
悬停：错，
加:错,，
选定：[]，
“表格列表”：[
“vs th:组件”，
“vs tr：组件”，
“vs td:组件”，
'线程：插槽'，
't车身：槽'，
'标题：插槽'
]
}
},
计算：{
…映射获取程序（[“adminServers”]），
…映射获取程序（[“addServer”]），
},
安装的（）{
window.Echo.channel（“addServer”）.listen（“创建的服务器”），e=>{
这个.store.commit（“添加服务器”，e.SERVER）；
this.addServer.name=“”；
this.addServer.ip=“”；
this.addServer.password=“”；
this.addServer.user=“”；
});
console.log（window.Echo.channel（“addServer”）.listen（“.server created”））
这是$store.dispatch（“获取服务器”）；
},
方法：{
createServer（）{
this.$store.dispatch（“ADD_SERVER”，this.addServer）；
},
}
}

其他一切都配置得很好（我相信），因为除了实时传输数据外，其他一切都可以工作

这就是我运行“php artisan websockets:serve”时在控制台中返回数据的方式：

连接id 442760083.70152140发送消息 {“事件”：“日志消息”，“频道”：“专用websockets仪表板api消息”，“数据”：{“类型”：“api消息”，“时间”：“17:15:26”，“详细信息”：“频道： addServer，事件： 服务器已创建“，”数据“，”服务器“，”id“：”26，“名称“：”测试“，”ip“：”12.2.223.1“，”用户“，”根“，”密码“，”asdasda“，”域“，”空“，”mysql_密码“，”空“，”ssh_端口“：”22，“ftp_端口“，”空“，”isActive“，”空，“创建于“：”2021-01-07T17:15:26.000000Z“，”更新于“：”2021-01-07T17:15:26.000000Z”}”

当我从pusher记录所有事件时，我有“

未捕获的TypeError:无法读取未定义的属性“apply” 位于Channel.Dispatcher.emit（app.js:69745） 位于Channel.handleEvent（app.js:70511） app.js:72629 位于ConnectionManager.Dispatcher.emit（app.js:69745） at消息（app.js:71045） 位于Connection.Dispatcher.emit（app.js:69745） at消息（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 message@app.js:71045 Dispatcher.emit@app.js:69745 message@app.js:70302 Dispatcher.emit @app.js:69745 TransportConnection.onMessage@app.js:69873 socket.onmessage@app.js:69890 app.js:122971[Vue warn]：中的错误 render:“TypeError:无法读取未定义的属性'id'”

发现于

--->位于resources/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 run@app.js:126890 flushSchedulerQueue@app.js:126648 （匿名）@app.js:124326 flushCallbacks@app.js:124252 Promise.then（异步）timerFunc@app.js:124279 nextTick@ app.js:124336 queueWatcher@app.js:126740 update@app.js:126880 通知@app.js:123082 mutator@app.js:123234添加服务器@ app.js:163382 wrappedMutationHandler@app.js:152624委托人@ 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 message@app.js:71045 Dispatcher.emit @app.js:69745 message@app.js:70302 Dispatcher.emit@app.js:69745 TransportConnection.onMessage@app.js:69873 socket.onMessage@ app.js:69890 app.js:124234类型错误：无法读取的属性“id” 未定义 91.js:346 位于Proxy.renderList（app.js:124974） 位于Proxy.render（91.js:342） 在VueComponent.Vue.上进行渲染（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）

---

有什么问题吗？

device.id为none检查为什么这些属性没有定义好我找不到wro