[Vuejs]-Data API not appear using Vue JS (Rapidapi)

by

1👍

✅

Thanks to your codesandbox, I achieved to display it properly with this

<template>
  <div>
    <div v-for="post in posts" :key="post.longitude"> <!-- be careful here, you had a longatitude typo here -->
      <div>country: {{ post.country }}</div>
      <div>code: {{ post.code }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {
    posts() {
      return this.$store.state.covid.posts
    },
  },
  mounted() {
    this.$store.dispatch('loadPosts')
  },
}
</script>

The main error was essentially in the covid.js file actually

mutations: {
  setPosts(state, posts) { // was components here, but should be posts as the 2nd argument
    state.posts = posts;
  }
},

2👍

It seems you need API key to use it. The code 401 means unauthorized probably because you are not using a key. You can get your API key and add it in the query parameter. You can read the documentation here:

https://docs.rapidapi.com/docs/keys

https://example.p.rapidapi.com/?rapidapi-key=***************************

In your case should be something like:

https://covid-19-data.p.rapidapi.com/report/country/name?name=Italy&date=2020-04-01&rapidapi-key=API_KEY_HERE

EDIT
If you want use states in components you need import them.

import { mapState } from 'vuex';

export default{

computed: { ...mapState(['posts']) }
}

You can do the same with actions.
http://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components

Leave a comment