Having recently transitioned from React to VueJs, I encountered a problem where fetching data using axios.get returns a successful response in the console.log. However, when trying to iterate through the array with v-for, nothing is rendered. If you have any suggestions or can point out what I might be doing wrong, it would be greatly appreciated. Here's the code snippet:
<SignUpForm />
<h1>Countries List</h1 >
<div v-for="country in countries" :key="country.name" >
<p>{{country.name}}</p>
</div>
</template>
<script>
import SignUpForm from "@/components/SignUpForm.vue";
import axios from 'axios'
export default{
name: 'SignUpView',
components:{
SignUpForm
},
data(){
return{
countries: []
}
},
async mounted() {
const {data} = await axios.get('https://gist.githubusercontent.com/keeguon/2310008/raw/bdc2ce1c1e3f28f9cab5b4393c7549f38361be4e/countries.json')
console.info(data)
this.countries = data
}
}
</script>
The axios.get call is made within the mounted(){} lifecycle hook, and then the retrieved data is assigned to an empty array declared in the data(){} function. This allows me to use v-for to iterate through the JSON response in a div.
For visual reference, here's an image of the issue: https://i.sstatic.net/R3U5a.png