[Vuejs]-Making a "Trending/Most Viewed Articles" in Vue

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

Leave a comment