当接口返回的数据很多时如何限制

无论有多少条数据，最初只显示八条，点击加载更多后，每次多展示五条数据

静态页面html：

<div class="message-con" v-loading="Loading" v-if="activeIndex == 0">
        <surveyItem
          v-for="(consensusItem, consensusIndex) in consensus"
          :key="consensusIndex"
          :itemArticle="consensusItem"
          :gaPaths="'行业观察' + tabname"
          :tips_="true"
          :index ='consensusIndex'
        >
        </surveyItem>
        <div
          class="search-more"
          @click="searchMore"
          v-show="consensus != 0 && isLoading"
        >
          <span>加载更多</span>
          <em class="search-more-icon"></em>
        </div>
        <div class="search-more" v-show="consensus != 0 && !isLoading">
          <span>已加载全部</span>
        </div>
        <div class="search-more" v-show="consensus == 0">
          <span>暂无数据</span>
        </div>
      </div>

在接口部分进行限制：

$axios.post("/Main/action/Dashboard/Homepage/getNewsList", {
        type: 2,
        ald_type: 2,
        size: 8,
        page: 1,
      }),

其中size：8限制了最初渲染的数据条数

方法部分：

searchMore() {
      if (this.activeIndex == 0) {
        this.consensusSize += 5;
        this.getInfor(2, this.consensusSize);
       }
      }

this.consensusSize += 5;表明如果点击了加载更多，使展示条目加5

其中data return中要声名{

       consensus: [],

       consensusSize: 8,

      }