Vue Bootstrap 分页定义：总行数

Question

我正在学习使用 AXIOS 对从 API 返回的数据进行分页。我有一组工作代码，但在引导程序定义的代码中有一个位置：Total-rows，这目前是硬编码的，但这会根据值而不是计算值创建额外的行。我想动态计算行数。

我知道我可以使用this.variable = response.data.length计算来自api的响应数据，但我调用数据的方式是使用页面变量来分页。

对于完成这个看似简单的调用的有效方法有什么建议吗？

<template>
  <div id="app">
    <div class="row">
      <div class="col-md-12">
        <li v-for="item in todos" :key="item.id">
          {{ item.name }} : {{ item.type }}
        </li>   
      </div>
    </div>
    <b-pagination size="md" :total-rows="54" v-model="currentPage" :per-page="10" @input="getPostData(currentPage)">
    </b-pagination>
  </div>    
</template>

VUE

<script>
//Import axios for REST API calls
import axios from 'axios'
import 'regenerator-runtime/runtime';
//Import bootstrap CSS
import 'bootstrap/dist/css/bootstrap.css'
//Import bootstrap vue CSS
import 'bootstrap-vue/dist/bootstrap-vue.css'

const baseURL = 'http://localhost:3000/todos?_page='+this.currentPage+'&_limit='+this.limit;

export default {
  name: 'app',
  data () {
    return {
      title: 'Vue.js Pagination Example With Bootstrap',
      currentPage: 1,
      limit: 5,
      todos: [],
       todoName: "",
      todoType: "",
    }
  },
  methods: {
    // Fetches todos when the component is created.
    getPostData (currentPage) {
      axios.get('http://localhost:3000/todos?_page='+this.currentPage+'&_limit='+this.limit)
      .then(response => {
        //console.log(response)
        // JSON responses are automatically parsed.
        this.todos = response.data
         
      })
      .catch(e => {
        this.errors.push(e)
      })
    },
    
       async addTodo() {
      const res = await axios.post(baseURL, {
        name: this.todoName,
        type: this.todoType,
      });
      this.todos = [...this.todos, res.data];
      //resets the input field
      this.todoName = "";
      this.todoType = "";
    },
   
  }, //end of methods
 //detects the current page on load
   mounted(currentPage){
    this.getPostData(currentPage)
  } 
}
</script>

Answer 1

您将需要 API 返回总行数，否则您的前端无法知道要显示多少页。

您可以在下面找到一个示例，该示例使用名为 reqres 的虚拟/测试 API。此 API 返回各种信息，例如当前页面、总行数和每页，当然还有所请求页面的数据。

new Vue({
  el: "#app",
  data() {
    return {
      currentPage: 1,
      totalRows: 0,
      perPage: 0,
      users: [],
      request: null
    }
  },
  methods: {
    async getData(page) {
      const response = await fetch(`https://reqres.in/api/users?page=${page}&per_page=3`).then(resp => resp.json())
      this.perPage = response.per_page;
      this.users = response.data;
      this.totalRows = response.total;

      // Only for testing purposes
      this.request = response
    }
  },
  created() {
    this.getData(this.currentPage)
  }
})

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="app">
  <b-pagination 
        v-model="currentPage" 
      :total-rows="totalRows" 
      :per-page="perPage" 
      @change="getData">
  </b-pagination>
  <ul>
    <li v-for="{ first_name, last_name } in users">
      {{ first_name }} {{ last_name }}
    </li>
  </ul>
  Request
  <pre>{{ request }}</pre>
</div>