I have a chat API that I’m connecting to a Vue.js project.
When user goes to a chat room page, it sends an ajax request and then calls the function that fetches the whole chat history:
JavaScript
x
24
24
1
mounted() {
2
$.ajax({
3
url: `http://localhost:8000/api/rooms/${this.$route.params.id}/`,
4
data: {username: this.username},
5
type: 'PATCH',
6
success: (data) => {
7
const user = data.members.find((member) => JSON.parse(member).username === this.username)
8
9
if (user) {
10
// The user belongs/has joined the session
11
this.fetchChatSessionHistory(this.$route.params.id)
12
}
13
}
14
})
15
16
17
},
18
19
fetchChatSessionHistory (uri) {
20
$.get(`http://127.0.0.1:8000/api/rooms/${uri}/messages/`, (data) => {
21
this.messages = data.messages
22
})
23
},
24
but it fails with:
TypeError: _this.fetchChatSessionHistory is not a function
I understand that it might be defined at a wrong place but I have no idea how do it right.
Advertisement
Answer
You should put that function inside methods
property as follows :
JavaScript
1
9
1
mounted(){
2
3
},
4
methods:{
5
fetchChatSessionHistory (uri){
6
.
7
}
8
}
9