The paging of vue I got a total of 10 pieces of total=12 data per page. Why is there no data when I click on the second page number?

< template >
< el-main >

<h1></h1>
<ul>
  <li v-for="news in tableData"><router-link :to=""/schoolnotice/"+news.newsID">{{news.title}}</router-link><span>{{news.publishTime}}</span></li>
</ul>
        ****
<el-pagination
  layout="prev, pager, next"
  :total="total"
  :page-size="10"
  @current-change="handleCurrentChange"
>
</el-pagination>

< / el-main >
< / template >

< script >
export default {
data () {

return {
  newsList:[],
  total:{},
  tableData: [], //
  allData: [], //
}

},

                             ****

mounted () {

const that = this;
console.log(that);
this.$http.get(
  that.$interface+"getArticlePages?categoryId=2"
)
  .then(function (response) {
    if(response.data.status === 1){
      response.data.data.list.forEach(function(item){
        that.allData.push({
          title:item.title,
          publishTime:item.publishdate,
          newsID:item.articleid,
        });
        that.total = response.data.data.total;
                    **allDatatableData** 
        that.tableData = that.allData.slice(0, 10);
        console.log(that.total);
      });
    }else{
      that.$message({
        message: response.data.msg,
        type: "warning"
      });
    }
  })
  .catch(function (err) {
    console.log(err);
    that.$message({
      message: " error",
      type: "warning"
    })
  });

}, Page number Click event
methods: {

handleCurrentChange(val) {  //
  console.log(val);
  this.tableData = this.allData.slice((val - 1) * 10, 10 * val);
}

}

total

Mar.13,2021

when you switch to page 2, check whether tableData is the remaining two pieces of data


-update

withdraw my previous answer. I was wrong. Sweat

will the interface return 10 pieces of data?


take a look at the number of data items in your allData


there should be a problem with the background interface. total and list do not match


  1. find your backend, if it is to do front-end paging to let him return all the data, it is also likely to be back-end paging and you do not have a clear interface

    response.data.data.list.forEach(function(item){
         ...
         console.log(that.total);//1012 list10
    });
  2. Why push in list.forEach , if you just want to format the array with map . Don't repeat the useless that.total =. and that.tableData =. in forEach . The first nine of the 10 loops are useless assignments.
Menu