1

Oi, estou aprendendo como que se usa Vue.js e até o momento estou sabendo como que cria components.

Porem estou como uma dificuldade, estou querendo renderizar um componente depois de carregar a pagina. Eu no meu projeto vou fazer call ajaxs e com o json que receber, inserir os componentes, mas antes, para testar a renderização deles estou usando esse código Jquery basico:

$('#test123').html('<inventory message="Click on the Item to activate it."></inventory>');

Porem esse componente não é renderizado e não acontece nada com ele, eu vi algumas coisas na internet, porem as soluções que eu achei renderizava um componente só, mas eu preciso renderizar varios, porque o json que eu vou receber, o javascript vai fazer foreach e colocar na div.

Obrigado pela atenção.

3
  • Cara não sei por onde está aprendendo Vue, mas não está indo em um caminho bacana não! Só de utilizar jQuery junto com Vue, já demonstra isto. Não entendi muito bem o que quer fazer, mas, Vue.js tem em uma das suas premissas principais a NÃO manipulação direta do DOM, te aconselho a ir aprendendo na documentação oficial no site: br.vuejs.org
    – LeAndrade
    7/10/2018 às 13:28
  • Olá @LeAndrade, estou usando Jquery só como teste, pois estou começando a aprender a usar Vue, e estou sabendo usar no momento componentes, esse Jquery era só para fazer um teste. Meu objetivo é que, no meu projeto vai ter tipo um joguinho, onde você tem seu inventario e seus itens, eu quero fazer com que quando o usuario clique para usar/ativar o item, a api vai retornar um json do inventario atualizado (sem o item, pois ele acabo de usar), só que os itens são componentes, fiz o teste com jquery e vi que o Vue não renderizava eles.
    – Miguilim
    7/10/2018 às 21:10

1 Resposta 1

1

O VueJS possui um ciclo de vida próprio. https://br.vuejs.org/v2/guide/instance.html na própria documentação ele explica os métodos que controlam esse ciclo de vida. Ao invés de usar o Jquery, o VueJS também tem o reatividade para código HTML, para isso, você pode usar "v-html" ao invés do "v-model" ou "v-bind".

3
  • Desculpa cara, mas não entendi muito bem como eu posso resolver o meu problema com o v-html :/ poderia me explicar melhor, por favor?
    – Miguilim
    8/10/2018 às 1:02
  • Diferente do v-model e v-bind, esses controlam o valor de input ou select, por exemplo. O V-HTML vai permitir escrever código HTML e o VueJS escreverá esse html para ser executado. 8/10/2018 às 12:03
  • Você pode criar um atributo na sua instância do Vue e adiconar da seguinte forma: "<div id="teste123" v-html="html"></div>". Quando o call do ajax ser executado, você pode fazer o foreach e adcionar a variável html. 8/10/2018 às 12:05

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .