Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Incluir no DOM um Vue component

Referente ao curso Vue.js parte 2: construindo Single Page Applications

por Felipe Coelho
| 39k xp | 18 posts
Desenvolvedor Front End

Tenho um componente (input-animate) que abre corretamente assim que a página é carregada. Porém quando tento adicioná-lo, via jquery ele não é renderizado.

Tenho uma instancia Vue principal que chama o componente: 

import InputAnimate from './components/InputAnimate.vue'
Vue.component('InputAnimate', InputAnimate)

new Vue({
  el: '#form-catalogo',
  methods: {
   addProduct: function() {
    $('.div').append('<input-animate></input-animate>')
   }
  }

No código html da página aparece o: <input-animate></input-animate> Mas na visualização do navegador não aparece nada. :(

4 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Boa tarde !

Não consegui entender seu código. Você esta usando jQuery dentro de um Vue component? Isso é totalmente desencorajado pelo framework, aliás, ele tenta livrá-lo da manipulação de DOM e quando você faz isso é meio que abandonar o framework.

Mesmo que você queira continuar a fazer dessa forma, não funcionará porque você esta adicionando simplesmente uma tag no seu DOM, uma tag que não é processada pelo Vue, por isso não funciona.

Em linhas gerais, esse <input-animate> deve estar já no template e você pode deixá-lo ativo ou não com o v-if. Esse v-if procura alguma propriedade do elemento que o alimenta para saber se deve ser exibido ou não.

Bom, não sei se é isso que você deseja, pois tive dificuldade em entender a sua intenção quando misturou jQuery com Vue.js.

por Felipe Coelho
| 39k xp | 18 posts
Desenvolvedor Front End

Usei jQuery pra me dar mais rapidez no desenvolvimento. Mas, como não é recomendado, posso tirar ele sem problemas.

Esta pagina é para inclusão de imagens de produtos. Assim q ue a página abre ela exibe, numa mesma linha, um input file pra upload da imagem e um input para informações da imagem:

<div class="item">
  <input type="file"> - <input type="text">
</div>

Logo a cima disso terá um botão que ao ser clicado irá incluir na tela mais uma dessa div.item. Conforme o usuário for clicando no botão deve ser incluida na tela essa div.item. Englobei esse código em um componente e to tentando inserir na tela mas não aparece. É bem isso que vc disse, a tag simplesmente é adicionada no html o Vue não está processando ela.

Não sei se agora deu pra entender meu problema.

solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Acho que entendi, nesse caso você faz algo assim:

<div class="item">
  <input-animate v-if="exibe"> </input-animate v-if="exibe">
  <input type="file"> - <input type="text">
</div>

Esse v-if se for true, exibe o componente, se false, não o exibe.

Ai, no seu método addProduct você faz this.exibe = true. O ideal é lá na sua função data() indicar que exibe é false por padrão.

Acho que por esse caminho você resolve essa parada.

por Felipe Coelho
| 39k xp | 18 posts
Desenvolvedor Front End

Agora foi, valeu mais uma vez pela ajuda. Abs