vue-무한 로드 요소를 재설정하는 방법?

vue-무한 로드 요소를 재설정하는 방법?

나는 전시품 목록을 가지고 있다.사용자는 전시물을 추가할 수 있다.사용자가 전시물을 추가할 때vue-infinite-loading전시물 수의 변화를 포착하지 않아 더 보여줄 게 있는데도 '목록의 끝'이라고 적혀 있다.

여기 코드펜이 있다.참고: 모래톱에서 vue-무한 로드가 작동하도록 할 수는 없지만, 내 사이트에서 작동 중인 것은 확실해.

암호는 다음과 같다.

HTML:

<div id="app">
  <button @click="addTenRows()">Add 10 Rows</button>
  <table cellpadding="10">
    <tr><th>id</th><th>Name</th><th>Description</th></tr>
    <tr v-for="exhibit in exhibits.resultsMap">
      <td>{{exhibit.id}}</td>
      <td>{{exhibit.name}}</td>
      <td>{{exhibit.desc}}</td>
    </tr>
  </table>
  <infinite-loading 
      :distance="10" 
      @infinite="loadMore" 
      ref="infiniteLoading" 
      identifier="exhibitLoader">
      <span slot="no-more">
        <h5>
          <i class="fa fa-check-circle"></i> End of Results
          <span v-if="exhibits.results">
              : <strong>{{exhibits.meta.totalRecords}} shown</strong>
          </span>
        </h5>
      </span>
  </infinite-loading>
</div>

JS:

new Vue({
  el: '#app',
  methods: {
    addTenRows(){
      this.exhibits.meta.totalRecords += 5;
    },
    loadMore(){
      this.exhibits.results.push('16');
      this.exhibits.results.push('17');
      this.exhibits.results.push('18');
      this.exhibits.results.push('19');
      this.exhibits.results.push('20');

      this.exhibits.resultsMap[ '16' ] = { 'id':'16', 'name': 'STR-16', desc: 'Exhibit number 16' };
      this.exhibits.resultsMap[ '17' ] = { 'id':'17', 'name': 'STR-17', desc: 'Exhibit number 17' };
      this.exhibits.resultsMap[ '18' ] = { 'id':'18', 'name': 'STR-18', desc: 'Exhibit number 18' };
      this.exhibits.resultsMap[ '19' ] = { 'id':'19', 'name': 'STR-19', desc: 'Exhibit number 19' };
      this.exhibits.resultsMap[ '20' ] = { 'id':'20', 'name': 'STR-20', desc: 'Exhibit number 20' };
    }
  },
  data: {
    exhibits: {
      meta: {
        totalRecords: 25
      },
      results: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15'],
      resultsMap:{
        '1':{ id: 1, name: 'STR-01', desc: 'some exhibit' },
        '2':{ id: 2, name: 'THR-20', desc: 'another exhibit' },
        '3':{ id: 3, name: 'STR-02', desc: 'a third' },
        '4':{ id: 4, name: 'THR-21', desc: 'This is the fourth Exhibit' },
        '5':{ id: 5, name: 'STR-03', desc: 'Number 5' },
        '6':{ id: 6, name: 'THR-22', desc: 'Up Up Down Down' },
        '7':{ id: 7, name: 'STR-04', desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ultrices ' },
        '8':{ id: 8, name: 'THR-23', desc: 'Praesent augue tellus, aliquet sit amet tellus in' },
        '9':{ id: 9, name: 'STR-05', desc: 'Cras eget augue tellus.' },
        '10':{ id: 10, name: 'THR-24', desc: 'Nunc facilisis elit at efficitur ullamcorper.' },
        '11':{ id: 11, name: 'STR-06', desc: 'In vel turpis ex. Curabitur mollis ac sapien eget aliquet' },
        '12':{ id: 12, name: 'THR-25', desc: 'Morbi eget lacus eu mi tincidunt scelerisque ac sed metus' },
        '13':{ id: 13, name: 'STR-07', desc: 'Donec consequat est maximus, venenatis velit a, vehicula felis' },
        '14':{ id: 14, name: 'THR-26', desc: 'Mauris orci neque, ullamcorper non blandit non' },
        '15':{ id: 15, name: 'STR-08', desc: 'Vivamus efficitur erat vel consectetur sagittis' }
      }
    }
  }
});

위의 예에서 다음 작업을 수행하십시오.

1. 페이지 로드, 15개의 레코드가 표시됨
2. 사용자가 "10개의 레코드 추가" 단추를 누를 때
3. exhibits.meta.totalRecords10이 늘다
   • 무한 로더에 새로 고침을 지시해야 함
4. 사용자가 하단의 10px 이내로 스크롤하고 로드하는 동안 무한 로딩에 스피너가 표시됨모어에는 10개의 행이 추가됨exhibits.results그리고exhibits.resultsMap

내가 시도했던 것들:

• 재설정 강제 실행:
  • 에addTenRows, 내가 10을 더하면meta.totalRecords
  • this.$refs.infiniteLoading.stateChanger.reset();- 아무것도 변하지 않음
  • this.$refs.exhibitLoader.stateChanger.reset();- 오류,exhibitLoader정의되지 않았다.
  • this.exhibitLoader.stateChanger.reset();- 오류,exhibitLoader정의되지 않았다.

이미 ref="무한 적재"를 추가했으므로 구성 요소가 생성되었는지 확인하십시오.

created(){
    if(this.$refs.InfiniteLoading){
        this.$refs.InfiniteLoading.stateChanger.reset(); 
    }
}

참조URL: https://stackoverflow.com/questions/54044709/how-to-reset-a-vue-infinite-loading-element