Как обратиться к методу VUE из mounted

Question

Проблема: В компоненте login.vue Есть слушатель шины tiny-emitter, который должен срабатывать на событие проваленной идентификации и запускать функцию с выводом текста в консоль (пока что только это, потом навешу остальное). Событие эмитит родительский app.vue после получения через сокет ответа от БД.

Выглядит это вот так:

mounted(){
  const emitter = require('tiny-emitter/instance');
  emitter.on('authFailed', function (resault) {
    let text="";
    if(resault=="failed")
      {
        text="Неверный логин или пароль"
      }
    else if(resault=="disabled")
      {
        text="Учетная запись заблокирована"
      }
    else if(resault=="notFound")
      {
        text="Пользователь не найден"
      }
    this.fail_alert(text);
  });
},
data(){
  return{
  }
},
 methods:{
 fail_alert(text){
  console.log(text);
  }
}

При выполнении получаю в консоль ошибку

login.vue:20 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'fail_alert')
    at eval (VM7287 login.vue:20:12)
    at E.emit (index.js?6ff4:36:1)
    at Socket.eval (App.vue?91a0:110:1)
    at Emitter.emit (index.mjs?05b0:136:1)
    at Socket.emitEvent (socket.js?4932:498:1)
    at Socket.onevent (socket.js?4932:485:1)
    at Socket.onpacket (socket.js?4932:455:1)
    at Emitter.emit (index.mjs?05b0:136:1)
    at eval (manager.js?6b87:207:1)

Опытным путем выяснил что this на этом этапе Undefined

Без "this." ожидаемо получаю

Uncaught ReferenceError: fail_alert is not defined

Подскажите, как мне из mounted правильно инициировать запуск метода?

Answer 1

Подскажите, как мне из mounted правильно инициировать запуск метода?

вот так, если я правильно понял

var app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    fail_alert(text) {
      console.log(text);
    }
  },
  mounted() {
    this.fail_alert('Привет Константин')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 2

Обратите внимание на то что Вы пытаетесь выполнить вызов внутри обработчика emitter.on('authFailed который знать не знает о Вашем окружени и что это Vue вообще не говоря о методах компонента. Т.е. this там явно будет чем-то другим. Для того чтобы это все правильно организовать можно попробовать сделать байндинг. Что я имею в виду мы делаем bind конкретного this а далее уже передаем эту функцию в событие. Иными словами мы привязываем требуемый this чтобы он определялся правильно.

mounted(){
  const emitter = require('tiny-emitter/instance');
  const fn = function(resault) {
    let text="";
    if(resault=="failed")
      {
        text="Неверный логин или пароль"
      }
    else if(resault=="disabled")
      {
        text="Учетная запись заблокирована"
      }
    else if(resault=="notFound")
      {
        text="Пользователь не найден"
      }
    this.fail_alert(text);
  }
  emitter.on('authFailed', fn.bind(this));
},

Приведу небольшой абстрактный пример демонстирующий то с чем Вы сталкнулись:

class App {
 constructor(){
   this.name='App'    
   const bad = document.querySelector('#bad')
   const good = document.querySelector('#ok')
   bad.onclick = function(){
     this.getName()
   }
   const test = function(){
     this.getName()
   } 
   good.onclick = test.bind(this)
 }
 getName(){
   console.log(this.name)
 }
}

new App()

<button id="bad">Bad</button>
<button id="ok">Good</button>

БЛОГ НА HUSL

Как обратиться к методу VUE из mounted

Ответы (2 шт):