elementUI的无线加载怎么我每滚动一次，他就加载一条我循环到页面上的数据，而不是所有的数据

Question

我现在这么写，他是直接加载我所有的数据10遍，我的数据一共有10条，我怎么才能滚动一次加载2条，到10条后就结束了

<template>
<div class="infinite-list-wrapper" style="overflow:auto">

<ul
  class="list"
  v-infinite-scroll="load"
  infinite-scroll-disabled="disabled">
  <li v-for="i in count" class="list-item">
   <div v-for="news in newsArticle" onclick="window.open('#/topic','_self')">
      <card>
        <img class="ima" slot="header" :src="news.pim">
        <div slot="content" class="card-padding">
          <p class="bt">{{news.title}}</p>
          <p class="time">{{news.time}}</p>
          <p class="wen">{{news.Introduction}}</p>
        </div>
      </card>
    </div>
  
  </li>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>

</div>
</template>

<script>
export default {

data () {
  return {
    count: 10,
    loading: false
  }
},
computed: {
  noMore () {
    return this.count >= 20
  },
  disabled () {
    return this.loading || this.noMore
  }
},
methods: {
  load () {
    this.loading = true
    setTimeout(() => {
      this.count += 2
      this.loading = false
    }, 2000)
  }
}

}
</script>

Answer 1

滚动到底部的时候会触发你定义的load函数，你要在load函数里，在你遍历的newsArticle数组里追加2个元素（一般这时候调用后台接口获取新增加的数据），从而实现滚动加载。
修改方法：
1.去掉： v-for="i in count"
2.

load () {
    this.loading = true
    setTimeout(() => {
      this.newsArticle.concat(addItemList);
      this.loading = false
    }, 2000)
}