Cannot call a function inside mounted()

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.

Answer

You should put that function inside methods property as follows :

mounted(){
      ...
      },
 methods:{
     fetchChatSessionHistory (uri){
         ....
      }
   }

Advertisement

Answer