在 Vue 中制作“趋势/最受欢迎的文章”

Question

第一次使用 Vue 并使用 wordpress rest api 制作一个 vue 应用程序。

我想做的是根据观看次数制作某种“热门/观看次数最多的文章”组件。

在 wordpress 中，有一个像 WP-PostViews 这样的插件，它将帖子视图存储在元字段中，然后您可以根据该计数查询帖子。

是否可以在 Vue 中做类似的事情？最好的方法是什么？也许在点击时做一个“axios.post”？抱歉我对Vue不是很熟悉

Answer 1

用 axios 为你做了一个简单的例子。 你应该用你的 API 替换 URL。

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>

说明： 在挂载的钩子中获取资源（API），因此每次加载组件时，都会获取您的文章 https://vuejs.org/v2/api/#mounted