Vue.js not displaying API response from external service

Other Questions RapidAPI
1

I’m working on a Vue.js project where I need to fetch data from an external API service. When I test the API endpoint directly, it returns the expected data. However, when I try to display this data in my Vue component, nothing shows up on the page.

I can see the data in the console log, but it’s not rendering in my template. I suspect there might be an issue with how I’m handling the data structure or my loop logic.

<template>
  <div v-for="item in dataList" :key="item.id">
    {{ item.region }}
    {{ item.cases }}
  </div>
</template>

<script>
export default {
  data() {
     return {}
  },
  computed: {
    dataList() {
        return this.$store.state.dataList
    }
  },
  mounted() {
    this.$store.dispatch("fetchData");
  }
};
</script>

import axios from 'axios'

const settings = {
    method: 'GET',
    url: 'https://health-api.p.rapidapi.com/statistics',
    params: {country: 'france'},
    headers: {
      'x-rapidapi-key': 'your-api-key-here',
      'x-rapidapi-host': 'health-api.p.rapidapi.com'
    }
  };

const healthStore = {
    state: () => ({
      dataList: []
    }),
    mutations:{
      setData(state, results){
         state.dataList = results
      }
    },
    actions: {
      fetchData({ commit }) {
        axios.request(settings)
        .then(response => {
            commit('setData', response.data)
            console.log(response.data)
        })
        .catch(function (error) {
            console.error(error);
        });
      }
    }
}

export default healthStore;

The console shows the API response is coming through correctly, but the template remains empty. What could be causing this rendering issue?

2

First, check if your Vuex store is properly imported in main.js - if it’s not, the state won’t be reactive. That health API probably returns nested JSON, not a flat array. Log Object.keys(response.data) to see what you’re actually getting. You’ll probably need state.dataList = results.data || results.statistics in your mutation instead.

3

Your API response structure probably doesn’t match what your template expects. I’ve hit this same issue with external APIs before. Most health stats APIs wrap their data in extra layers - like {data: {statistics: [...]}} instead of just returning an array. When you console.log response.data, check the actual structure. You’ll likely need to update your mutation to grab the right nested array - something like state.dataList = results.data.statistics. Also double-check that your Vuex store module is imported and registered properly. Your v-for expects dataList to be an array with objects that have region and cases properties, so make sure the API response matches exactly.

4

Had the same problem recently - it’s usually a data structure mismatch. Your code expects item.region and item.cases, but the API response probably doesn’t match that format. When you console.log response.data, check if it’s an array or wrapped in another object. Most health APIs nest data under properties like results, data, or statistics. Try changing your mutation to state.dataList = results.statistics or whatever the actual property is called. Double-check that your store’s properly registered with Vue too. Once you fix the data structure alignment, reactivity should work fine.