1

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:

inserir a descrição da imagem aqui

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. inserir a descrição da imagem aqui

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, inserir a descrição da imagem aqui

OBS: se eu copiar o elemento gerado no browser e colar no html, ele funciona

1 Resposta 1

0

Primeiro você pode criar um componente que colapsa, e chamar esse componente na sua vew.

Depois você pode usar o 'v-for' que é uma diretiva do vue.js para fazer um laço, esse laço deve recebe as informações do json.

Esse laço vai renderiza seu componente que tem o colapser quantas vezes for necessário, ou quantas vezes a sua variável do v-for tiver para percorer do seu json.

Se vc usar JSON.parse(response) passando a resposta do servidor como parâmetro ele vai separar o array de objs em vários objs separador que o v-for pode percorrer.

Ai você pode continuar e passar os valores que vc está recebendo no json como parâmetro para seu colapser ou imprimir eles dentro do seu componente com {{itens.value}} por ex.

Se você for mandar por parâmetro vc precisa preparar o componente para receber esses dados.

Vc pode criar as variáveis no componente e passar no seu componente assim:

Mas para vc n mandar um string para variável id vc tem que usar:

v-bind:id="itens.id"

Assim o vue vai intender que não é uma string que você vai passar para variável id que vc criou lá no seu componente por ex.

E no seu componente lembre que criar um valor padrão para sua variável, para não dar erro caso o campo esperado tenha que ser renderizado, mas n tenha recebido um valor

por ex:

 

  

 props:{ 

        id:{ type: String, default: 'vazio' }, 

       }, 

  

Mas pra isso funcionar você tem que forçar o componente a ser carregado só depois da requisição ser terminada, isso por conta de como o vue renderiza a pagina

Pra isso você pode usar o Suspense que é um componente especial que renderiza um conteúdo de fallback em vez do seu componente até que uma condição seja atendida, disponível no vue.js 3 e um v-if="" pra saber se a variável com a reposta do servidor está preenchida

ficando algo como

 

  

 <Suspense> 

                 <template #default> 

                    <div v-if="items != undefined"> 

                        <colapser v-for="itens in items" :key="itens.id" v-bind:id="itens.hierarquia" v-bind:descricao="itens.descricao"  ></colapser> 

                    </div> 

                 </template> 

                 <template #fallback> 

                     caregando... 

                 </template> 

            </Suspense> 

  

:

 

  

import colapser from "Seu componente colapser" 

import { ref, onMounted } from "vue"; 

export default { 

    components: { colapser }, 

    setup() {     

        var items = ref(null); 

        onMounted(async () =>{ 

            const funçãoQueVaiBuscarOJson = async() => { 

                //Aqui sua requisição 

                return resp; 

            }; 

            items.value = await funçãoQueVaiBuscarOJson();   

            // aqui você atribui a variável item a resposta do servido    

        }); 

        return { 

            items //essa é a variável que o v-for vai percorre 

        } 

    } 

} 

  

e o componente pode ficar assim:

 

  

export default { 

     

    props:{ 

        id:{ type: String, default: 'vazio' }, 

     

    }, 

    data(){ 

        return{ 

            isOpen: false,             

        } 

    }, 

    methods:{ 

        toggle(){ 

            this.isOpen = !this.isOpen 

        }             

    }, 

     setup() {  

        function mainNavToggle(a) { 

            var mainNav = document.getElementById(a); 

            mainNav.classList.toggle('collapsed'); 

        } 

        return{ 

             mainNavToggle 

  

        } 

     }     

} 

  
 

  

<template> 

    <div v-show="isOpen" id="mainNav" > 

          <div> {{id}}</div> 

     </div>           

         

</template> 

  

Com o método toggle ele já vai abrir e fechar os colapser sem interferir nos outros componentes isso porque usei @click.stop.prevent="toggle"

Você deve fazer log-in para responder a esta pergunta.