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?
#### EDITAtualizando 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.
console.log(this.accounts)
antes dothis.accounts.push(account)
?[]
ouundefined
?created()
? deixando assimasync created ()