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.
Advertisement
Answer
You should put that function inside methods
property as follows :
mounted(){ ... }, methods:{ fetchChatSessionHistory (uri){ .... } }