Vue

by cdwmhcc

HTML

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
  <h2>DEMO:</h2>
  
  
  <el-row :gutter="20">
    <el-col :span="6" v-for="(post, key) in posts" :key="key">
      <div class="grid-content bg-purple"></div>
    </el-col>
  </el-row>
  
  <el-pagination
      background
      @current-change="handlePageChange"
      :page-size="limit"
      :total="total">
    </el-pagination>
  
</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

new Vue({
  el: "#app",
  data: () => ({
      page:1,
      posts:[],
      total:1,
      limit:3,
      
    }),
  methods: {
  	getList(page){
        this.$axios.post(
          '/api/collections/get/article?token=361552da19411206339478e81228e6',
          {
            filter: { published: true },
            sort: {_created:-1},
            populate: 1,
            limit:this.limit,
            skip:page
          }
        )
          .then(res => {
            this.posts = res.data.entries
            this.total= res.data.total
          })
      },
      
      handlePageChange(page) {
        let Pages = this.limit * val - this.limit
        this.getList(Pages)
      }
  }
})