Повесить обработчик на скрытый элемент?

Question

[Max9999]

Добрый вечер.
Есть блок скрытый v-if (v-show не могу тут использовать). В нем элемент с tooltip от materializecss. Т.к. элемент скрыт при загрузки тултип не работает. Есть метод который изменяет видимость блока, но в нем не работает инициализация тултипа...

active(el){
this.viz=true
M.Tooltip.init( this.$refs.el, {enterDelay: 400})
}

Comments

[Дмитрий Беляев]

Вариантов несколько сделать такое:
- Обернуть нужный функционал в HOC, отслеживающий mount
- watch'ить условие в v-if
- возможно что-то еще, в зависимости от того как v-if меняется

Но я бы в первую очередь задумался о том, как это все отписывать, иначе память будет течь

Answer 1

[Aetae]

Есть много способов сделать это разной паршивости, но правильный метод: сделать компонент-обёртку, который и навесит весь нужный функционал внутри себя.
Самый примитивный пример:

Vue.component('m-tooltip', {
  mounted() {
    const tooltip = M.Tooltip.init(this.$el, {enterDelay: 400});
    this.$once('hook:beforeDestroy', () => tooltip.destroy());
  },
  render() {
    return this.$slots.default
  }
})

Если нужно что-то большее - всегда можно усложнить.

Comments

[Max9999]

Спасибо. Оформил в компонент