Добавить ванильный слушатель событий?

Question

У меня есть компонент, который упаковывает другой (сторонний) компонент.

Я нацеливаюсь на элемент в этом стороннем компоненте и добавляю прослушиватель событий.

document.querySelectorAll('.holder button').forEach(button => {
    button.addEventListener('click', () => {
        console.log('a');
    }, false);
});

У меня есть смонтированный выше код в моем родительском компоненте, но, похоже, нет событий, прикрепленных.

Answer 1

Хук жизненного цикла mounted - это правильное место, а также метод this.$nextTick(), но если все это не работает, вы должны использовать "готовый" обратный вызов третьей стороны.

• У большинства участников есть обратный вызов, который указывает, когда они готовы к работе. Этот обратный вызов должен добавить слушателя вашего события.

• Другим способом является монтирование третьей стороны в ваш mounted крюк, и после этой процедуры вы добавляете Слушатели внутри $nextTick(). Затем ваш слушатель добавляется после инициализации плагина, и у плагина есть один период времени рендеринга для правильного добавления его элементов в DOM.

  mounted () {
    // first mount your 3rd party plugin on it's element
    $('#mountelement').plugin()
  
    this.$nextTick(()=>{
      document.querySelectorAll('.holder button').forEach(button => {
        button.addEventListener('click', () => {
          console.log('a');
        }, false);
      });
    })
  }
  

Если вашей третьей стороне требуется запрос или она очень мала, вам следует Первый путь.