axios call in a method with vuejs and nuxt - vue.js

Question

For each country in my list of countries i need to make an api call with axios to get another value, here is y component :
<template>
<div>
<div v-for="(country, i) in countries" :key="i">
<div>{{ county[i.id].count }}</div>
</div>
</div>
</template>
In my script i call my method matchCount on mounted and store the value in my county data object :
<script>
export default {
props: {
countries: {
type: Array,
required: true
}
},
data() {
return {
county = {}
};
},
mounted() {
this.matchCount();
},
methods: {
matchCount() {
var paysCount = this.pays;
paysCount.forEach(item => {
this.$axios
.get(
`https://api.com/federation/}/${item.id}/`
)
.then(response => {
this.county[item.id] = {};
this.county[item.id].count = response.data.length.toString();
});
});
}
}
};
</script>
I get this error "TypeError: Cannot read property 'count' of undefined", how should i call this method ?

Answer 1

You will find useful using the following syntax in your HTML templates {{variable[key] && variable[key].value}}.
In your particular case it would be:
<template>
<div>
<div v-for="(country, i) in countries" :key="i">
<div>{{ county[i.id] && county[i.id].count }}</div>
</div>
</div>
</template>
What it does, is essentially verifying if the key i.id exists in county array. If not, it will not throw error about missing objects / keys.
You can use this syntax when using objects too as following:
<div v-text="house.dog && house.dog.name" ></div>
If dog is in the house object then it will show dog's name.
Edit:
Add this.$forceUpdate(); to the function:
matchCount() {
var paysCount = this.pays;
paysCount.forEach(item => {
this.$axios
.get(
`https://api.com/federation/}/${item.id}/`
)
.then(response => {
this.county[item.id] = {};
this.county[item.id].count = response.data.length.toString();
this.$forceUpdate();
});
});
}

Answer 2

county[item.id].count is set asynchronously, it might not be available when you render the component. You can add a safe check:
<template>
<div>
<div v-for="(country, i) in countries" :key="i">
<div v-if="county[i.id]">{{ county[i.id].count }}</div>
<div v-else>Loading...</div>
</div>
</div>
</template>
and it seems that you have reactivity problem:
this.$axios
.get(
`https://api.com/federation/}/${item.id}/`
)
.then(response => {
this.$set(this.county, item.id, {count: response.data.length.toString())
});