[Vuejs]-Display API data from rapidapi in vue

by

1👍

✅

You should define a method in the Vue instance that gets your API data.

Like this: 

methods: {
    getRapidApiData() {
        //do the fetch.... etc
    }
}

You can get rid of var chuck = []; because it’s not needed and replace references of chuck with this.chuckData.

You can then initiate chuckData like chuckData: []

👤Shoejep

0👍

The final solution looks something like this:

<div class="col-md-3" v-for="result in chuck">
         {{result}}
</div>

<script>
export default {
  data() {
    return {
      chuck: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
    fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {
      method: "GET",
      headers: {
        "x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
        "x-rapidapi-key": "<API KEY>"
      }
    })
      .then(response => response.json())
      .then(data => {
        this.chuck = data;
      });
    }
  }
};
</script>

Thanks!

👤Artvader

Leave a comment