我是Laravel和Vue.js的新手，我按照YouTube上的教程在项目中添加了聊天功能并使用this code from github。直到明天为止一切正常，我打开它查看它是否正常工作，但是突然间我遇到了错误，我什至没有做任何更改，我不知道出了什么问题。
控制台错误
[Vue warn]: Error in mounted hook: "ReferenceError: selected is not defined"
found in
---> <ContactsList> at resources/js/officer/components/ContactsList.vue
<ChatApp> at resources/js/officer/components/ChatApp.vue
<Root>
ReferenceError: selected is not defined
at VueComponent.mounted (officer.js?id=88b2a50635bf2fbb5ce4:2042)
at invokeWithErrorHandling (officer.js?id=88b2a50635bf2fbb5ce4:32986)
at callHook (officer.js?id=88b2a50635bf2fbb5ce4:35343)
at Object.insert (officer.js?id=88b2a50635bf2fbb5ce4:34269)
at invokeInsertHook (officer.js?id=88b2a50635bf2fbb5ce4:37464)
at Vue.patch [as __patch__] (officer.js?id=88b2a50635bf2fbb5ce4:37681)
at Vue._update (officer.js?id=88b2a50635bf2fbb5ce4:35069)
at Vue.updateComponent (officer.js?id=88b2a50635bf2fbb5ce4:35190)
at Watcher.get (officer.js?id=88b2a50635bf2fbb5ce4:35601)
at new Watcher (officer.js?id=88b2a50635bf2fbb5ce4:35590)
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'privateChannel' of undefined"
found in
---> <ChatApp> at resources/js/officer/components/ChatApp.vue
<Root>
TypeError: Cannot read property 'privateChannel' of undefined
at Echo._private (officer.js?id=88b2a50635bf2fbb5ce4:5860)
at VueComponent.mounted (officer.js?id=88b2a50635bf2fbb5ce4:1946)
at invokeWithErrorHandling (officer.js?id=88b2a50635bf2fbb5ce4:32986)
at callHook (officer.js?id=88b2a50635bf2fbb5ce4:35343)
at Object.insert (officer.js?id=88b2a50635bf2fbb5ce4:34269)
at invokeInsertHook (officer.js?id=88b2a50635bf2fbb5ce4:37464)
at Vue.patch [as __patch__] (officer.js?id=88b2a50635bf2fbb5ce4:37681)
at Vue._update (officer.js?id=88b2a50635bf2fbb5ce4:35069)
at Vue.updateComponent (officer.js?id=88b2a50635bf2fbb5ce4:35190)
at Watcher.get (officer.js?id=88b2a50635bf2fbb5ce4:35601)
App.js
window.Vue = require("vue");
Vue.component("chat-app", require("./components/ChatApp.vue"));
Vue.component("Conversation", require("./components/Conversation.vue"));
Vue.component("ContactsList", require("./components/ContactsList.vue"));
Vue.component("MessageFeed", require("./components/MessageFeed.vue"));
Vue.component("MessageComposer", require("./components/MessageComposer.vue"));
const chatapp = new Vue({
el: "#chatapp",
});
bootstrap.js
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true,
wsHost: window.location.hostname,
wsPort: 8000,
disableStats: true,
});
chat.blade.php
<div class="container" id="chatapp">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="kt-portlet__head kt-portlet__head--lg">
<div class="kt-portlet__head-toolbar">
<div class="kt-portlet__head-wrapper">
<div class="kt-portlet__head-actions">
<div class="panel-footer">
<chat-app :user="{{ \Illuminate\Support\Facades\Auth::user('officer') }}">
</chat-app>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
ChatApp.vue
<template>
<div class="chat-app">
<ContactsList :contacts="contacts" @selected="startConversationWith"/>
<Conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage"/>
</div>
</template>
<script>
import Conversation from './Conversation';
import ContactsList from './ContactsList';
const axios = require('axios');
export default {
props: {
user: {
type: Object,
required: true
}
},
data() {
return {
selectedContact: null,
messages: [],
contacts: []
};
},
beforeMount() {
Echo.private(`messages.${this.user.id}`)
.listen('NewMessage', (e) => {
this.handleIncoming(e.message);
});
axios.get('/officer/contacts')
.then((response) => {
console.log(response.data);
this.contacts = response.data;
});
},
methods: {
startConversationWith(contact) {
this.updateUnreadCount(contact, true);
axios.get(`/officer/conversation/${contact.id}`)
.then((response) => {
this.messages = response.data;
this.selectedContact = contact;
})
},
saveNewMessage(message) {
this.messages.push(message);
},
handleIncoming(message) {
if (this.selectedContact && message.from === this.selectedContact.id) {
this.saveNewMessage(message);
return;
}
this.updateUnreadCount(message.from_contact, false);
},
updateUnreadCount(contact, reset) {
this.contacts = this.contacts.map((single) => {
if (single.id !== contact.id) {
return single;
}
if (reset)
single.unread = 0;
else
single.unread += 1;
return single;
})
}
},
components: {ContactsList, Conversation}
}
</script>
ContactList.vue
<template>
<div class="contacts-list">
<ul>
<li v-for="contact in sortedContacts" :key="contact.id" @click="selectContact(contact)" :class="{ 'selected': contact == selected }">
<div class="avatar">
<img :src="'https://via.placeholder.com/150'" :alt="contact.name">
</div>
<div class="contact">
<p class="name">{{ contact.name }}</p>
<!-- <p class="email">{{ contact.email }}</p>-->
</div>
<span class="unread" v-if="contact.unread">{{ contact.unread }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
contacts: {
type: Array,
default: []
}
},
data() {
return {
selected: this.contacts.length ? this.contacts[0] : null
};
},
methods: {
selectContact(contact) {
this.selected = contact;
this.$emit('selected', contact);
}
},
computed: {
sortedContacts() {
return _.sortBy(this.contacts, [(contact) => {
if (contact == this.selected) {
return Infinity;
}
return contact.unread;
}]).reverse();
}
}
}
</script>
Conversation.vue
<template>
<div class="conversation">
<h1>{{ contact ? contact.name : 'Select a Contact' }}</h1>
<MessageFeed :contact="contact" :messages="messages"/>
<MessageComposer @send="sendMessage"/>
</div>
</template>
<script>
import MessageFeed from './MessageFeed';
import MessageComposer from './MessageComposer';
export default {
props: {
contact: {
type: Object,
default: null
},
messages: {
type: Array,
default: []
}
},
methods: {
sendMessage(text) {
if (!this.contact) {
return;
}
axios.post('/officer/conversation/send', {
contact_id: this.contact.id,
text: text
}).then((response) => {
this.$emit('new', response.data);
})
}
},
components: {MessageFeed, MessageComposer}
}
</script>
可能是laravel-echo-server错误，但不确定，如果是，请给我一些解决方案。