Javascript Vue引导分页定义：行总数

我正在学习使用AXIOS对API返回的数据进行分页。我有一个工作的代码集，但是在引导定义的代码中有一个位置：Total rows，它当前是硬编码的，但是它基于值而不是计算值创建额外的行。我想动态计算行数

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

有什么建议可以有效地完成这个看似简单的任务吗

<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>

{{item.name}}:{{item.type}

VUE

//为REST API调用导入axios
从“axios”导入axios
导入“再生器运行时/运行时”；
//导入引导CSS
导入“bootstrap/dist/css/bootstrap.css”
//导入引导vue CSS
导入“bootstrap vue/dist/bootstrap vue.css”
常量baseURL=http://localhost:3000/todos?_page=“+this.currentPage+”和_limit='+this.limit；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
标题：“Vue.js带引导的分页示例”，
当前页面：1，
限额：5，
待办事项：[]，
todoName:“，
todoType:“”，
}
},
方法：{
//在创建组件时获取TODO。
getPostData（当前页面）{
axios.get（）http://localhost:3000/todos?_page=“+this.currentPage+”&_limit='+this.limit）
。然后（响应=>{
//console.log（响应）
//JSON响应会自动解析。
this.todos=response.data
})
.catch（e=>{
此.errors.push（e）
})
},
异步addTodo（）{
const res=wait axios.post（baseURL{
姓名：this.todoName，
type:this.todoType，
});
this.todos=[…this.todos，res.data]；
//重置输入字段
this.todoName=“”；
this.todoType=“”；
},
}，//方法结束
//在加载时检测当前页面
已安装（当前页）{
this.getPostData（当前页）
} 
}

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

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

newvue({
el:“应用程序”，
数据（）{
返回{
当前页面：1，
总计行数：0，
每页：0，
用户：[]，
请求：空
}
},
方法：{
异步getData（第页）{
const response=等待获取(`https://reqres.in/api/users?page=${page}&per_page=3`）。然后（resp=>resp.json（）
this.perPage=response.peru页面；
this.users=response.data；
this.totalRows=response.total；
//仅用于测试目的
this.request=响应
}
},
创建（）{
this.getData（this.currentPage）
}
})

{{first_name}{{last_name}}


要求
{{request}}

感谢Hiws，这是让我进一步了解API的完美线索，我注意到您没有将AXIOS用于API数据收集方面。我使用AXIOS是否做得太多了，还是纯粹为了某种类型的数据采集情况。感谢您的帮助使用

axios

非常好，我主要是使用

fetch

，因此我不必在示例中导入

axios

。我会坚持使用axios，因为它使事情变得更简单，并且被广泛使用。

<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>