vue.js 不能在创建的函数内调用函数

Question

I'm trying to code a response to websocket messages in vue.js using sweetalert.

Sadly I cannot call sweetalert or a function I defined in methods inside the onmessage in created.

Uncaught TypeError: this.confirmation is not a function at WebSocket.connection.onmessage

  methods: {
    confirmation(response) {
      if (response.data == "stop") {
        this.$swal({
          icon: "success",
          text: "stopped!",
        });
      }
      if (response.data == "start") {
        this.$swal({
          icon: "success",
          text: "started!",
        });
      }
    },
  },
  created() {
    this.connection.onmessage = function(event) {
      console.log(event.data);
      this.confirmation(event);
    };
  },

Answer 1

This should work:

created() {
    const that = this;
    this.connection.onmessage = function(event) {
      console.log(event.data);
      that.confirmation(event);
    };
}

Functions that are defined with the function keyword have their own this . Using the that variable preserves the outer scope's this so the inner scope can access it.

Answer 2

I think this is a problem with the usage of this , as it seems like your method is called in the wrong context. Details on the usage of this in js here . I'd problably just define the function elsewhere, where you can access it without using this . There might be an more elegant way, but I'm honestly not to familiar with the indepths of javascript

Answer 3

While @Neferin 's answer is generally correct, you can use arrow function to handle cases like this. Shortly function defined with a function keyword has it's own scope, means has it's own this . Arrow-function does not have a scope.

Here is an example:

 created() {
    this.connection.onmessage => (event) {
      //                     ^^^^
      // in the arrow function this is a parent scope
      console.log(event.data);
      this.confirmation(event);
    };
  },