0👍
Made a quick example for you with axios.
You should replace URL with your API.
new Vue({
el: "#app",
data: {
articles: []
},
mounted() {
axios.get("https://jsonplaceholder.typicode.com/posts")
.then(response => {
this.articles = response.data
})
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
padding: 10px 0;
border-bottom: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<div id="app">
<h2>Articles:</h2>
<ol>
<li v-for="article in articles">
{{article.title}}
</li>
</ol>
</div>
Description:
Fetching resource (API) in mounted hook, so everytime component loads, will fetch for your articles
https://v2.vuejs.org/v2/api/#mounted
- [Vuejs]-VueJs use attribute value to get array value
- [Vuejs]-How to make vueitfy v-layout to cover the whole width of the screen
Source:stackexchange.com