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:
mounted() {
$.ajax({
url: `http://localhost:8000/api/rooms/${this.$route.params.id}/`,
data: {username: this.username},
type: 'PATCH',
success: (data) => {
const user = data.members.find((member) => JSON.parse(member).username === this.username)
if (user) {
// The user belongs/has joined the session
this.fetchChatSessionHistory(this.$route.params.id)
}
}
})
},
fetchChatSessionHistory (uri) {
$.get(`http://127.0.0.1:8000/api/rooms/${uri}/messages/`, (data) => {
this.messages = data.messages
})
},
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.
You should put that function inside methods
property as follows :
mounted(){
...
},
methods:{
fetchChatSessionHistory (uri){
....
}
}
You can do the following:
mounted() {
var _this = this;
$.ajax({
url: `http://localhost:8000/api/rooms/${this.$route.params.id}/`,
data: {username: _this.username},
type: 'PATCH',
success: (data) => {
const user = data.members.find((member) => JSON.parse(member).username === _this.username)
if (user) {
// The user belongs/has joined the session
_this.fetchChatSessionHistory(_this.$route.params.id)
}
})
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.