When attempting to retrieve data from an external API and display it in my component, I am encountering an issue where the returned result is an empty array despite the fact that there is data present in the API. Here is the relevant code snippet from my module:
import axios from 'axios';
const state = {
countries = []
}
const getters = {
allCountries: (state) => state.countries;
}
const actions = {
//Fetch all countries from the API
async fetchCountries({ commit }) {
const response = await axios.get('URL');
commit('setCountries', response.data);
},
}
const mutations = {
setCountries: (state, countries) => (state.countries = countries),
}
export default {
state,
getters,
actions,
mutations,
};
Component:
<template>
<div v-for="country in allCountries" :key="country.id">
<small>{{country.name}}</small>
</div>
</template>
<script>
import { mapGetters} from 'vuex';
export default{
name: 'CompCountry',
computed: mapGetters(['allCountries'])
}
</script>