我尝试在我的项目laravel 7中创建聊天应用程序，但是我遇到语法错误，我不知道我在哪里搜索，但我看不到。当我在http://127.0.0.1:8000/中检查控制台时，出现此错误
SyntaxError: /home/mokoch/projetabonnementpayant/resources/js/components/ChatApp.vue: Unexpected token, expected "{" (12:11)
[0m [90m 10 | [39m[36mimport[39m [33mContactsList[39m from [32m'./ContactsList'[39m[33m;[39m[0m
[0m [90m 11 | [39m[0m
[0m[31m[1m>[22m[39m[90m 12 | [39m [36mexport[39m defaults {[0m
[0m [90m | [39m [31m[1m^[22m[39m[0m
[0m [90m 13 | [39m data(){[0m
[0m [90m 14 | [39m [36mreturn[39m {[0m
[0m [90m 15 | [39m selectedContact[33m:[39m [36mnull[39m[0m
at Parser._raise (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:754)
at Parser.raiseWithData (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:747)
at Parser.raise (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:741)
at Parser.unexpected (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:8844)
at Parser.parseExport (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:12302)
at Parser.parseStatementContent (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:11297)
at Parser.parseStatement (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:11193)
at Parser.parseBlockOrModuleBlockBody (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:11768)
at Parser.parseBlockBody (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:11754)
at Parser.parseTopLevel (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:11124)
at Parser.parse (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:12826)
at parse (home/mokoch/projetabonnementpayant/node_modules/@babel/parser/lib/index.js:12879)
at parser (home/mokoch/projetabonnementpayant/node_modules/@babel/core/lib/parser/index.js:54)
at parser.next (<anonymous>)
at normalizeFile (home/mokoch/projetabonnementpayant/node_modules/@babel/core/lib/transformation/normalize-file.js:93)
at normalizeFile.next (<anonymous>)
at run (home/mokoch/projetabonnementpayant/node_modules/@babel/core/lib/transformation/index.js:31)
at run.next (<anonymous>)
at Function.transform (home/mokoch/projetabonnementpayant/node_modules/@babel/core/lib/transform.js:27)
at transform.next (<anonymous>)
at step (home/mokoch/projetabonnementpayant/node_modules/gensync/index.js:254)
at gen.next (home/mokoch/projetabonnementpayant/node_modules/gensync/index.js:266)
at async.call.value (home/mokoch/projetabonnementpayant/node_modules/gensync/index.js:216)
at errback.call (home/mokoch/projetabonnementpayant/node_modules/gensync/index.js:184)
at runGenerator.errback (home/mokoch/projetabonnementpayant/node_modules/@babel/core/lib/gensync-utils/async.js:72)
at val (home/mokoch/projetabonnementpayant/node_modules/gensync/index.js:108)
at step (home/mokoch/projetabonnementpayant/node_modules/gensync/index.js:280)
at gen.next (home/mokoch/projetabonnementpayant/node_modules/gensync/index.js:266)
at async.call.value (home/mokoch/projetabonnementpayant/node_modules/gensync/index.js:216)
at Object../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components/ChatApp.vue?vue&type=script&lang=js& (app.js:1909)
at __webpack_require__ (app.js:20)
at Module../resources/js/components/ChatApp.vue?vue&type=script&lang=js& (app.js:55796)
at __webpack_require__ (app.js:20)
at Module../resources/js/components/ChatApp.vue (app.js:55759)
at __webpack_require__ (app.js:20)
at Object../resources/js/app.js (app.js:55687)
at __webpack_require__ (app.js:20)
at Object.0 (app.js:55839)
at __webpack_require__ (app.js:20)
我检查了chatapp.vue，但是找不到错误。 这是我的ChatApp.vue
<div class="chat-app">
<Conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage"/>
<ContactsList :contacts="contacts" @selected="startConversationWith"/>
</div>
</template>
<script>
import Conversation from './Conversation';
import ContactsList from './ContactsList';
export default {
props: {
user: {
type: Object,
required: true
}
},
data() {
return {
selectedContact: null,
messages: [],
contacts: []
};
},
mounted() {
Echo.private(`messages.${this.user.id}`)
.listen('NewMessage', (e) => {
this.hanleIncoming(e.message);
});
axios.get('/contacts')
.then((response) => {
this.contacts = response.data;
});
},
methods: {
startConversationWith(contact) {
this.updateUnreadCount(contact, true);
axios.get(`/conversation/${contact.id}`)
.then((response) => {
this.messages = response.data;
this.selectedContact = contact;
})
},
saveNewMessage(message) {
this.messages.push(message);
},
hanleIncoming(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: {Conversation, ContactsList}
}
</script>
<style lang="scss" scoped>
.chat-app {
display: flex;
}
</style>
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="contact.profile_image" :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>
<style lang="scss" scoped>
.contacts-list {
flex: 2;
max-height: 100%;
height: 600px;
overflow: scroll;
border-left: 1px solid #a6a6a6;
ul {
list-style-type: none;
padding-left: 0;
li {
display: flex;
padding: 2px;
border-bottom: 1px solid #aaaaaa;
height: 80px;
position: relative;
cursor: pointer;
&.selected {
background: #dfdfdf;
}
span.unread {
background: #82e0a8;
color: #fff;
position: absolute;
right: 11px;
top: 20px;
display: flex;
font-weight: 700;
min-width: 20px;
justify-content: center;
align-items: center;
line-height: 20px;
font-size: 12px;
padding: 0 4px;
border-radius: 3px;
}
.avatar {
flex: 1;
display: flex;
align-items: center;
img {
width: 35px;
border-radius: 50%;
margin: 0 auto;
}
}
.contact {
flex: 3;
font-size: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
p {
margin: 0;
&.name {
font-weight: bold;
}
}
}
}
}
}
</style>
有人可以告诉我错误在哪里？因为我试图找到我找不到。我试图做其他不起作用的事情，因为我被阻止了，所以我请求您的帮助。
答案 0 :(得分：1)
将您的data() {}更改为
data: () => ({
selectedContact: null,
messages: [],
contacts: []
}),
数据应该是一个函数，您可以在此处查看更多信息：https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function