Recommand · May 14, 2022 0

fetching json api in vueJs log the results but renders nothing (I'm new with Vue)

I’m new in VueJs, actually coming from react, the problem I’m having is that when i fetch the data with an axios.get the console.log shows a succesfull response. But when I to iterate through the Array with v-for it renders nothing. It’s quite important so it be super appreciated if you can tell me what im doing wrong or you have a suggestion. heres the code:

    <SignUpForm />
    <h1>Countries List</h1 >
    <div v-for="country in countries" :key="" >

import SignUpForm from "@/components/SignUpForm.vue";

import axios from 'axios'

export default{
    name: 'SignUpView',
          countries: []
    async mounted() {
      const {data} = await axios.get('')
      this.countries = data


You can see that what I’m actuallt doing is the axios.get in the mounted(){} f(x), later I = the data to my empty Array declared in data(){}. => So I can iterate trough the json response with a v-for in a div.

Heres the picture so you can see: enter image description here

You may also like…

amazon-web-services android angular api arrays c# css dart dataframe django docker excel express firebase flutter html ios java javascript jquery json kotlin laravel linux list mongodb mysql node.js pandas php postgresql python python-3.x r react-native reactjs regex spring spring-boot sql sql-server string swift typescript vue.js