1
resposta

v-on em tags criadas em tempo de execução

Olá colegas, eu venho aqui com um desafio que está presente no meu cenário de programação:

Como usar o "v-on" em uma tag que foi criada em tempo de execução?

Digamos que tenho um componente vue dentro da minha aplicação e que em certos momentos ele executa esse JavaScript via methods:

//Capturamos o DOM de uma tag <div> qualquer:
let divExemplar = document.querySelector('#minha-div-preferida');

//Escrevemos um novo código html dentro desta div
divExemplar.innerHTML = "<button v-on:click='alert()'></button>"

Notei que quando crio tags em tempo de execução, usando o JavaScript DOM ( tanto com .innerHTML quanto .appendChild() ), a notação v-on implementada não funciona.

Há alguma forma de implementar a notação v-on em uma tag criada em tempo de execução? Meu maior objetivo é que esta tag acione um de meus methods que estão implementados no componente.

1 resposta

Oi Elias, tudo bem? Não cheguei a estudar Vue ainda, mas acredito que esse não é um problema no Vue em si, mas sim no JavaScript, veja esse tópico por exemplo: https://cursos.alura.com.br/forum/topico-diferenca-entre-o-addeventlistener-na-table-e-no-tr-na-remocao-de-novos-pacientes-adicionados-atraves-do-formulario-74390

Não conseguimos capturar eventos de elementos recém adicionados no DOM por causa da inicialização em si. Então, se você precisa fazer algo nessa linha, eu recomendaria verificar se você não pode ouvir por exemplos no elemento pai.

Faz sentido?