Testing your API in the Vue component

We can make a simple API in our App.vue component to verify if we are connected to the API source. Let's make a call to say the business API endpoint

http://localhost:3000/api/news/business

<template>
  <div id="app">
    <ul id="example-1">
      <li v-for="item in newsItems" :key="item.title">{{ item.title }}		    </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {},
  data() {
    return {
      newsItems: null
    };
  },
  created() {
    fetch("http://localhost:3000/api/news/business")
      .then(data => data.json())
      .then(data => (this.newsItems = data));
  }
};
</script>

<style></style>

This should display the array of news items retrieved in the template as shown below.