Testing your API in the Vue component
22 November 20201 min(s) read
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.