[Vue.js]無限スクロールプラグイン使用時の注意点(vue-infinite-loading)

<template>
  <div>
		<div>
			<table>
				<thead>
					<tr>
						<th>ID</th>
						<th>名前</th>
						<th>カテゴリ</th>
						<th>値段</th>
					</tr>
				</thead>
				<tbody>
					<tr ref="row" v-for="(data) in viewData" :key="data.id">
						<td ref="id">{{ data.id }}</td>
						<td ref="name">{{ data.name }}</td>
						<td ref="category">{{ data.category }}</td>
						<td ref="price">{{ data.price }}</td>
					</tr>
				</tbody>
			</table>
			<!-- InfiniteLoadingコンポーネントを定義 -->
			<infinite-loading @infinite="infiniteHandler" spinner="spiral" >
				<div slot="no-more"></div>
			</infinite-loading>
		</div>
  </div>
</template>

<script>
export default {
	name: 'InfiniteScroll',
	data(){
		return {
			viewData: [],
			allData: [],
			offset: 0,
			limit: 20,
			itemCounter: 1
		}
	},
	
	mounted(){
		console.log("mounted")
	},

	created(){
		const list = [
			{name:'データモデリング入門', category:'IT本', price:'4000'}, 
			{name:'プロヘクトマネージャ', category:'IT本', price:'3000'},
			{name:'多変量分析', category:'統計本', price:'2000'},
			{name:'ソフトウェアテスト', category:'IT本', price:'3500'},
			{name:'エルデンリング', category:'PS5ゲーム', price:'8000'},
			{name:'GTA5', category:'PS4ゲーム', price:'7500'},
			{name:'マリオカート', category:'Switchゲーム', price:'5500'},
			{name:'スプラトゥーン', category:'Switchゲーム', price:'6000'}
		]
		for(let i = 0; i < 200; i++){
			var index = Math.floor(Math.random()*list.length)
			this.allData.push({count: this.itemCounter++, id: "S" + i, name: list[index].name, category: list[index].category, price:list[index].price})
		}
	},

	
	methods: {
		//InfiniteScrollから呼ばれるハンドラ、ここにデータ取得処理を実装
		infiniteHandler($state) {
			console.log("infiniteHandler")
		
			var data = this.getDatas()
			if (data == null || data.length == 0) {
				// 表示するデータが無くなった場合
				$state.complete()
			}else{
				// 表示するデータがある場合
				this.offset += data.length
				this.viewData = this.viewData.concat( data )
				$state.loaded()
			}
		},
		//axiosとかのAPI想定
		getDatas() {
			var data =  this.allData.slice(this.offset, this.offset + this.limit)
			return data
		}
	}
}
</script>

    this.$refs.id[0].style.background="#C0C0C0"

		infiniteHandler($state) {
			console.log("infiniteHandler")
		
			var data = this.getDatas()
			if (data == null || data.length == 0) {
				// 表示するデータが無くなった場合
				$state.complete()
			}else{
				// 表示するデータがある場合
				this.offset += data.length
				this.viewData = this.viewData.concat( data )
				$state.loaded()
　　　　 
        //追加部分 開始
        if( (this.offset - data.length) == 0 ){
          this.$refs.id[0].style.background="#C0C0C0" 
        }
        //追加部分 終了
			}
		}

		infiniteHandler($state) {
			console.log("infiniteHandler")
		
			var data = this.getDatas()
			if (data == null || data.length == 0) {
				// 表示するデータが無くなった場合
				$state.complete()
			}else{
				// 表示するデータがある場合
				this.offset += data.length
				this.viewData = this.viewData.concat( data )
				$state.loaded()
　　　　 
        //追加部分 開始
        this.$nextTick(function() {
          if( (this.offset - data.length) == 0 ){
            this.$refs.id[0].style.background="#C0C0C0" 
          }
        });
        //追加部分 終了
			}
		}

		//価格のソート処理
		sortPrice(){
			//元のソート処理
			this.allData.sort(function(first, second){
				if (first.price > second.price){
					return -1;
				}else if (first.price < second.price){
					return 1;
				}else{
					return 0;
				}
			});
			
      //TODO:スクロール維持、非維持によりここの記述する処理を変える
		}

    <thead>
        <tr>
           <th>ID</th>
           <th>名前</th>
           <th>カテゴリ</th>
           <th @click="sortPrice">値段</th>
       </tr>
    </thead>

    //TODO:スクロール維持、非維持によりここの記述する処理を変える
    let length = this.viewData.length
    for( let i = 0; i < length; i++ ){
        this.viewData.splice(i, 1, this.allData[i])
    }

	<infinite-loading @infinite="infiniteHandler" spinner="spiral" :identifier="infiniteId"> 
		<div slot="no-more"></div>
	</infinite-loading>

	data(){
		return {
			viewData: [],
			allData: [],
			offset: 0,
			limit: 20,
			itemCounter: 1,
			infiniteId:0
		}
	},

  //TODO:スクロール維持、非維持によりここの記述する処理を変える			
  this.viewData = []
  this.offset = 0
	if( this.infiniteId == 0 ){
		this.infiniteId = 1
	}else{
		this.infiniteId = 0
	}

		getDatas() {
			var data =  this.allData.slice(this.offset, this.offset + this.limit)
			data.forEach((value) => {
				value.count = this.itemCounter++
			})
			return data
		},

		addRow(){
			var data = {count:0, id: '', name: '', category: '', price:''}

			this.viewData.unshift(data)
			this.allData.unshift(data)

			this.itemCounter = 1
			this.viewData.forEach((value) => {
				value.count = this.itemCounter++
			})
			
		  this.offset += 1

			this.$nextTick(function() {
				//refs確認用コード
				this.$refs.row[0].style.background="#C0C0C0"
				this.$refs.row[1].style.background="#b0e0e6"
			})

		}