0

Проблема: В компоненте 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 правильно инициировать запуск метода?

0

2 ответа 2

1

Обратите внимание на то что Вы пытаетесь выполнить вызов внутри обработчика 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>

1
  • Спасибо, вы правы, я не учел что внутри emitter "this" уже не будет относиться к mounted. 21 мар в 20:59
0

Подскажите, как мне из 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>

4
  • В вашем примере вы создаете новый экземпляр Vue, а я работаю в компоненете, который, по идее, наследует экземпляр из родителя, из app.vue . Должен же быть способ в стандартной конфигурации компонента обратиться из mounted к methods. P.S. От перестановки местами mounted и methods результат не меняется. 21 мар в 13:43
  • @Константин, вопрос в том, как в компоненте вызвать mounted если метод в родительской странице? 21 мар в 13:46
  • Нет. Весь код что я выше представил - из компонента. Просто внутри компонента я не объявляю новый экземпляр Vue, т.е. вот это "var app = new Vue({ el: '#app'," для меня неприменимо, vue app уже смонитрован в родителе. И я работаю на сервере, а не через CDN. мне внутри компонента при моем текущем коде надо обратиться из mounted к методу. 21 мар в 13:52
  • так я создал экземпляр чтобы здесь пример разместить рабочий, для теста удалите свои if все, и просто посмотрите, как отрабатывает ваш код - все должно работать 21 мар в 13:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.