Vue.js API integration with RapidAPI returns empty data

Other Questions RapidAPI
1

Vue.js API Data Not Displaying Issue

I’m working on fetching external API data in my Vue application using an API from RapidAPI. The API call works fine when I test it directly with Postman, but when I implement it in my Vue app, nothing shows up on the screen.

I think there might be an issue with how I’m handling the data loop or the Vuex store setup. The console shows the API response correctly, but the template doesn’t render anything.

Here’s my Vue component:

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

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

And here’s my Vuex store:

import axios from 'axios'

const requestConfig = {
    method: 'GET',
    url: 'https://disease-tracker-api.p.rapidapi.com/stats',
    params: {country: 'spain'},
    headers: {
      'x-rapidapi-key': 'your-api-key-here',
      'x-rapidapi-host': 'disease-tracker-api.p.rapidapi.com'
    }
  };

const healthData = {
    state: () => ({
      dataItems: []
    }),
    mutations:{
      updateData(state, payload){
         state.dataItems = payload
      }
    },
    actions: {
      fetchData({ commit }) {
        axios.request(requestConfig)
        .then(result => {
            commit('updateData', result.data)
            console.log(result.data)
        })
        .catch(function (err) {
            console.error(err);
        });
      }
    }
}

export default healthData;

The console.log shows the API response is coming through properly, but my template stays empty. What am I missing in my implementation?

2

Check your Vuex module namespacing first. If you’re using namespaced modules but accessing the store without the namespace prefix, your computed property won’t find the state. Also make sure your item objects actually have id, region, and cases properties that match exactly what’s in your template. Wrong property names will make v-for render empty divs. Try hardcoding some test data in your initial state to see if the template works - that’ll tell you if it’s an API data issue or store connection problem.

3

seems like a reactivity issue. try adding {{ dataItems }} in your template to check if anythin renders. also make sure your store module’s correctly registered in the main store file - that’s a common mistake that leads to silent failures.

4

Your API response structure is probably the issue. When you console.log result.data, check if the data’s nested inside another object. Most RapidAPI endpoints wrap data in extra layers like result.data.results or result.data.data. Your template wants an array to loop through, but you might be passing an object or the array’s buried deeper. Try logging Object.keys(result.data) to see what’s actually there, then fix your commit statement. If the array’s at result.data.results, change your action to commit('updateData', result.data.results). This array format vs actual API response mismatch happens all the time with third-party APIs.