Criando o App Vue.js

Sua página está agora com Vue sendo incluído por CDN e removemos todo o Javascript que tinha nela. Agora vamos usar o Vue para buscar os Cães e Gatos reativamente.

O Vue.js precisa criar o que ele chama de "Vue App" para gerenciar os dados de uma aplicação Vue na página.

Primeiramente vamos criar o javascript necessário para Vue gerenciar o estado do HTML da sua página.

Próximo ao fim do documento, após a tag </body> e antes da tag </html> você criou uma tag script vazia. Vamos nela colocar o seguinte código, deixando-a assim:

<script>
  var app = new Vue({
  el: '#meuAppVue',
  data: {
    tipoAnimal: '',
    animais: []
  },
  methods: {
    async escolherTipoAnimal() {
      if (this.tipoAnimal == '') return;
      const animaisJSONURL = `dados/${this.tipoAnimal}.json`;
      const resultado = await fetch(animaisJSONURL);
      if (resultado.ok) {
        this.animais = await resultado.json();
      }
    }
  }

})

</script>

Esse é todo o código Javascript que será necessário no nosso sistema. Vamos analisar.

Primeiro é criado um objeto do tipo Vue chamado "app":

var app = new Vue({....resto do do codigo....})

Esse app é nosso componente Vue nessa página. Ele recebe algumas configurações. As principais são:

• "el" que informa qual elemento esse componente Vue está gerenciando (no nosso caso é o "#meuAppVue", ou seja, a div com o id="meuAppVue" (que ainda não existe)
• "data" que diz ao Vue qual dados esse componente estará guardando. No nosso caso são dois:
  • A string "tipoAnimal", que pode ser 'caes' ou 'gatos'. Inicia como string vazia.
  • O Array "animais" que guardará a lista de animais que retornará do fetch que busca os documentos json (como anteriormente). Inicia como Array vazio [].
• "methods" tem uma coleção de métodos que iremos executar na nossa aplicação dinamicamente. No nosso caso é só um chamado "escolherTipoAnimal()" que roda quando o select muda de opção. Ele tem que ser declarado como async pois usa usa o await fetch como sintaxe para buscar os elementos. Não se preocupe muito com isso, mas se desejar saber mais basta acessar: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Basicamente a parte de Javascript é essa. Um app Vue, gerenciando o elemento '#meuAppVue', com dois dados (tipoAnimal e animais) e com um método escolherTipoAnimal.

Repare que o método "escolherTipoAnimal" agora é muito mais simples que anteriormente. Ele simplesmente gera a URL do JSON, mas diferente de antes ele não rpecisa obter o tipo de animal escolhido do elemento usando javascript, e sim somente usa o valor do dado "tipoAnimal" que está declarado no app Vue usando "this.tipoAnimal" para isso (precisa usar o this pois é um dado do app Vue). Depois ele simplesmente usa o fetch para obter o JSON e altera o valor de this.animais que o array do nosso app view. Ele não precisa fazer nenhuma alteração nos elementos HTML, limpar a lista de animais, criar elementos LI, nada disso. Essa parte é tratada de forma diferente com veremos mais a frente.

Essas configurações não estão ainda sendo aplicadas no HTML, elas somente estão prontas para serem utilizadas.