vue.js не удается вызвать функцию внутри функции в созданном

#javascript #vue.js #websocket #typeerror #sweetalert

#javascript #vue.js #websocket #ошибка типа #sweetalert

Вопрос:

Я пытаюсь закодировать ответ на сообщения websocket в vue.js использование sweetalert.

К сожалению, я не могу вызвать sweetalert или функцию, которую я определил в методах внутри onmessage в created.

Неперехваченная ошибка типа: this.confirmation не является функцией в 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);
    };
  },

Ответ №1:

Это должно сработать:

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

Функции, которые определены с помощью function ключевого слова, имеют свои собственные this . Использование that переменной сохраняет внешнюю область this , поэтому внутренняя область может получить к ней доступ.

1. Хороший ответ всегда будет включать объяснение, почему это решило бы проблему, чтобы OP и любые будущие читатели могли извлечь из этого уроки

2. Вы определили основную причину. Это хороший пример, объясняющий, что OP сделал неправильно. После изучения контекста этого, OP следует рассмотреть возможность использования функций со стрелками.

Ответ №2:

Я думаю, что это проблема с использованием this , поскольку кажется, что ваш метод вызывается в неправильном контексте. Подробности об использовании этого в js здесь. Я бы, возможно, просто определил функцию в другом месте, где вы можете получить к ней доступ без использования this . Может быть более элегантный способ, но я, честно говоря, не знаком с глубинами javascript

Ответ №3:

Хотя ответ @Neferin в целом правильный, вы можете использовать функцию стрелки для обработки подобных случаев. Функции, определенные с помощью function ключевого слова, имеют свою собственную область видимости, что означает, что у нее есть своя this . Функции со стрелкой не имеют области видимости.

Вот пример:

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