我對 Vue.js 還很陌生，無法理解為什么會出現此錯誤：
Uncaught TypeError: Cannot read properties of undefined (reading 'contacts')
這是導致錯誤的方法：
methods: {
sortContacts: () => {
return _.sortBy(self.contacts, [(contact) => {
return contact.unread;
}]).reverse();
}
}
聯系人是組件資料中的一個陣列，為什么不能訪問呢？
我根據要求提供了整個腳本，它在此文本下方。代碼是用 Vue.js 撰寫的，我沒有包含上面的 HTML，這似乎是不必要的。
<script>
import Conversation from "../components/Conversation";
import ContactsList from "../components/ContactsList";
import { mapState } from 'vuex';
export default {
components: {Conversation, ContactsList},
data() {
return {
selectedContact: null,
messages: [],
contacts: []
}
},
computed: {
...mapState({
userId: state => state.user.id
}),
},
mounted() {
axios.get('/api/contacts')
.then((response) => {
const contacts = response.data.data;
this.contacts = _.sortBy(contacts, [(contact) => {
return contact.unread;
}]).reverse();
});
},
watch: {
userId(userId) {
Echo.private(`messages.${userId}`)
.listen('NewMessage', (e) => {
this.handleIncoming(e.message);
});
}
},
methods: {
addMessage(message) {
this.messages.push(message);
},
async logout() {
try {
axios.post("/logout");
this.$store.dispatch("logout");
this.$router.push({ name: "auth-login" });
} catch (error) {
this.$store.dispatch("logout");
this.$router.push({ name: "auth-login" });
}
},
getMessages(contact) {
this.updateUnreadCount(contact, true);
axios.get(`/api/messages/${contact.id}`)
.then((response) => {
this.messages = response.data.data;
this.selectedContact = contact;
});
},
handleIncoming(message) {
if (this.selectedContact && message.from === this.selectedContact.id) {
this.addMessage(message);
}
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;
this.contacts = this.sortContacts();
}
return single;
});
},
sortContacts: () => {
return _.sortBy(this.contacts, [(contact) => {
return contact.unread;
}]).reverse();
}
}
}
</script>
uj5u.com熱心網友回復：
我做了一個小片段來做同樣的事情。
除了明顯的self錯誤之外，我已經將您的sortContacts方法符號更改為：
sortContacts: function () {
return _.sortBy(this.contacts, [(contact) => {
return contact.unread;
}]).reverse();
}
并且按預期作業。
顯示代碼片段
var app = new Vue({
el: "#app",
data() {
return {
result: [{name: 'adam', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}],
};
},
methods: {
sortClick: function (){
this.result = this.sortContacts();
},
sortContacts: function (){
console.log(this.result)
return _.sortBy(this.result, [(r) => {
return r.name;
}]).reverse();
}
},
});<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
</head>
<body>
<div id="app">
{{ result }}
<button v-on:click="sortClick">Reverse</button>
</div>
</body>
</html>請同時驗證const contacts = response.data.data;您部分中的代碼mounted段。
通常請求的內容在第一個data。確保您的內容確實在第二個data屬性中。一個簡單console.log的request就可以了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/461765.html
標籤：Vue.js