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. Commented 21 мар. 2023 в 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 результат не меняется. Commented 21 мар. 2023 в 13:43
  • @Константин, вопрос в том, как в компоненте вызвать mounted если метод в родительской странице? Commented 21 мар. 2023 в 13:46
  • Нет. Весь код что я выше представил - из компонента. Просто внутри компонента я не объявляю новый экземпляр Vue, т.е. вот это "var app = new Vue({ el: '#app'," для меня неприменимо, vue app уже смонитрован в родителе. И я работаю на сервере, а не через CDN. мне внутри компонента при моем текущем коде надо обратиться из mounted к методу. Commented 21 мар. 2023 в 13:52
  • так я создал экземпляр чтобы здесь пример разместить рабочий, для теста удалите свои if все, и просто посмотрите, как отрабатывает ваш код - все должно работать Commented 21 мар. 2023 в 13:54

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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