1

Estou com problemas para popular uma select com os dados que tenho como retorno de uma API. Estou usando Vue.

Segue códigos:

Meu HTML esta assim:

<select>
  <option value="" disabled selected>Escolha uma conta</option>
  <option v-for="account in accounts" :key="account" :value="account">{{ account }}</option>
</select>

Estou fazendo a chama da API com axios:

data() {
  accounts: []
},

methods: {
  async getAccounts() {
   await this.$axios.$get('http://localhost:4000/api/accounts')
    .then(res => {
      // console.log(res)
      res.map(account => {
        this.accounts.push(account)
        // console.log(this.accounts)
      })
    })
    .catch(err => {
      // console.log(err)
      M.toast({html: 'Houve um erro ao buscar contas.', classes: 'rounded red darken-1', outDuration: 1000})
    })
  }
},

created() {
  this.getAccounts()
}

Mas quando carrega a página o select não é populado. Se eu tiro o comentário do console.log(this.accounts) depois do push, ele mostra no console os valores dentro do array certinho.

Alguém poderia me ajudar?

#### EDIT

Atualizando o código depois de algumas alterações, tanto no vue quanto na API que faço consumo. E dando algumas explicações referente alguns pontos que o @guastallaigor levantou.

Primeiro as questionamentos da resposta do @guastallaigor:

1 - data () sempre deve ser uma função e ela deve retornar um objeto

    R: O código esta com o return no data, é que no momento de fazer a 
     pergunta eu não selecionei tudo, dei ctrl+c e ctrl+v, eu fui 
     pegando por parte do código e jogando aqui, ai nessa posso ter 
     deixado passar o return.

2 - Verifique se a maneira que você está utilizando o axios está 
    correta, pois está divergente da documentação e da maneira que 
    costumo utilizar/ver. (axios.get - no meu esta $axios.$get)

    R: Estou utilizando desta forma, porque não estou utilizando o 
       VueJS puro, estou utilizando o Nuxt, que é um "framework" (não 
       sei se da pra chama-lo assim), construído em cima do Vue, é bem 
       interessante, e nele ja vem o axios configurado. Aí no Nuxt pra 
       usar o axios devo dar um this.$axios.$get por exemplo, ai não 
       necessito dar import no axios também.

3/4 - Verifique se a resposta da API é de fato um array / Verifique se 
      a API está correta e voltando o JSON da maneira esperada;

    R: A API esta retornando um array de objetos da forma que preciso 
       no front, agora não necessito mais do map ou forEach. Depois 
       que alterei o retorno da API agora só preciso do   
       this.accounts = res, e ele ja me retorna corretamente, verifico 
       isso pelo console.log(res)

5 - Utilize o :key com uma chave única, ou a chave do próprio v-for

    R: A API me retorna um array de objetos, com, conta e 
       descricao_conta. Dentro das options, devo mostrar "conta - 
       descricao_conta", então como tenho o código da conta, no :key, 
       eu jogo accounts.conta, e não necessito da chave do próprio 
       objeto.

Agora irei colocar como esta o código do meu front:

<select v-model="selected">
  <option value="" disabled selected>Escolha uma conta</option>
  <option
      v-for="account in accounts"
      :key="account.conta" 
      :value="account.conta">
      {{ account.conta }} - {{ account.descricao_conta }}
 </option>
</select>


data() {
    return {
        selected: null,
        accounts: []
    }
}


methods: {
  async getAccounts() {
    let self = this
    await this.$axios.$get('http://localhost:4000/api/accounts')
      .then(res => {
        // console.log(res)
        self.accounts = res
        // console.log(self.accounts)
      })
      .catch(err => {
        // console.log(err)
        M.toast({html: 'Houve um erro ao buscar as contas.', classes: 'rounded red darken-1', outDuration: 1000})
      })
  }
}


async created() {
  await this.getAccounts()
  console.log(this.accounts)
}

O console.log que coloquei dentro do created(), ele retorna a variável accounts preenchida com os dados da API corretamente, mas o select continua vazio. Ou seja, quando chamo a função que busca os dados na API, ele realmente popula a variável accounts, mas não popula o select.

18
  • como está console.log(this.accounts) antes do this.accounts.push(account) ? [] ou undefined? 7/05/2018 às 16:11
  • Ele não retorna dado nenhum. Retorna [ob: Observer]
    – Gabriel
    7/05/2018 às 16:21
  • Alterei a API, e nela já configurei os dados para virem em Array do jeito que preciso, então no Vue só estou atribuindo o res para accounts
    – Gabriel
    7/05/2018 às 16:22
  • Mas mesmo assim continua sem funcionar. Tentei criar uma variável fora do axios para armazenar o this, mas mesmo assim não foi
    – Gabriel
    7/05/2018 às 16:22
  • Porque não coloca tudo em created()? deixando assim async created () 7/05/2018 às 16:26

1 Resposta 1

2

Vou tentar ajudar com base no que eu entendi e as suas respostas no comentário.

Há alguns detalhes que podem estar influenciando o seu problema.

1. data () sempre deve ser uma função e ela deve retornar um objeto;

O seu código está assim:

data() {
  accounts: []
},

Quando deveria estar assim:

data () {
  return {
    accounts: []
  }
},

Ou assim:

data: () => ({
  accounts: []
}),

2. Verifique se a maneira que você está utilizando o axios está correta, pois está divergente da documentação e da maneira que costumo utilizar/ver;

Você está utilizando assim:

this.$axios.$get

Eu costumo utilizar/ver assim:

axios.get // ou mudando a nomenclatura

E importando assim, geralmente em seu mainjs:

import axios from 'axios'

3. Verifique se a resposta da API é de fato um array;

Você utiliza a resposta diretamente com a função map

res.map(account => {

Quando se a resposta for um objeto, ocorrerá um erro. Outro ponto é que se for de fato um array, pode ser atribuído assim:

this.accounts = res

Ou assim, realizando a cópia:

this.accounts = [...res]

Não havendo a necessidade do map, pois o map ainda retornará um array, que você não está utilizando. Se não desejar utilizar assim, e de fato com a função push, poderia utilizar um forEach.

4. Verifique se a API está correta e voltando o JSON da maneira esperada;

Não há o que explicar neste caso, apenas verifique o retorno com console.log.

5. Utilize o :key com uma chave única, ou a chave do próprio v-for;

No caso, colocar o objeto inteiro (supondo que é um objeto) dentro do atributo :key não é aconselhável. Caso seja um objeto, e não tenha um id para ele, coloque assim:

<option v-for="(account, key) in accounts" :key="key" :value="account">{{ account }}</option>

Exemplo:

Iniciando um novo projeto, e utilizando o axios da maneira que mostra a documentação, bem como alguns pontos que eu disse, juntamente com o mockAPI, há este resultado funcional, preenchendo o select corretamente:

HelloWorld.vue

<template>
  <div class="stackoverflow">
    <select>
      <option value="" disabled selected>Escolha uma conta</option>
      <option v-for="account in accounts" :key="account" :value="account">{{ account.name }}</option>
    </select>
  </div>
</template>

<script>
import axios from 'axios'
const url = 'http://5af0e90b954a1000145c4c65.mockapi.io/accounts'

export default {
  name: 'Stackoverflow',
  data: () => ({
    accounts: []
  }),
  methods: {
    async getAccounts () {
      await axios.get(url)
        .then(res => {
          console.log(res)
          this.accounts = [...res.data]
        })
        .catch(err => {
          console.log(err)
          // M.toast({html: 'Houve um erro ao buscar contas.', classes: 'rounded red darken-1', outDuration: 1000})
        })
    }
  },
  created () {
    this.getAccounts()
  }
}
</script>
2
  • Obrigado pela força @guastallaigor. Vou editar minha pergunta, pois alterei o retorno que a API manda pro vue. E explicar alguns pontos que vc levantou com sua resposta.
    – Gabriel
    8/05/2018 às 13:04
  • quanto ao this.$axios, ele possivelmente deve está fazendo um Mixin para injetar o mesmo (ou pelo menos, eu espero que esteja). 9/05/2018 às 14:31

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 .