Estou recebendo um json com uma coleção de objs, a quantidade é dinâmica, estou criando o elemento div e adicionado um id dinâmico para ele, minha ideia era fazer div.setAttribute("onclick", alerta("${idRotativo}")) mas o vue não acha a função alerta quando faço assim,
Também fiz :
div.setAttribute("@click", alerta("${idRotativo}")
)
mas da esse erro:
Com:
div.setAttribute("v-on:click", alerta("${idRotativo}")
)
Não da erro e ele consegue setar o atributo "v-on:click", mas não funciona.
Eu fiz um ex do que eu preciso no jsFiddle Quando clica na linha ele retornar o id do elemento clicado, https://jsfiddle.net/CarlosAlexandreleutz/a89m4r7d/6/
Achei que poderia ser como eu estava criando o elemento html que é impresso na tela
então tentei com document.createElement('div');
var conter = 0;
function verificaRelacionamento (element){
conter++
let elemento = element;
let div = document.createElement('div');
div.textContent = `Id: ${elemento.id} Descrição: ${elemento.descricao} Descrição do pai ${elemento.descricaoPai}`;
let idRotativo = 'teste' + conter;
div.setAttribute("id", idRotativo)
div.setAttribute("v-on:click", `alerta("${idRotativo}")`)
let paiDeTodo = document.getElementById('paiDeTodos');
paiDeTodo.appendChild(div)
}
function tamanhoDoArray(a){
let array = a;
array.forEach(verificaRelacionamento)
}
function alerta(a){
alert(a)
}
E com um template string:
var conter = 0;
var html = '';
function verificaRelacionamento(element) {
conter++
let elemento = element;
html += `<div v-on:click="alerta('colapser-${conter}')" class="colapser-${conter}">
Id: ${elemento.id} Descrição: ${elemento.descricao} Descrição do pai ${elemento.descricaoPai}
<button v-on:click="alerta('colapser-${conter}')">teste</button>
</div>`;
document.getElementById("paiDeTodos").innerHTML = html;
}
function tamanhoDoArray(a){
let array = a;
array.forEach(verificaRelacionamento)
}
function alerta(a){
alert(a)
}
os 2 geram o mesmo html, mas nada acontece quando clico neles
meu objetivo final e fazer um plano de contas, vou usar esse id para adicionar e remover uma class para colapsar os itens, do msm jeito que tem no inspecionar do google, que o usuário pode clicar na setinha e ir vendo o que tem dentro dos elementos,
OBS: se eu copiar o elemento gerado no browser e colar no html, ele funciona