[Vue.js]無限スクロールプラグインのvue-virtual-scroll-list使用例

vue create [プロジェクト名]

? Please pick a preset:
  router-sample ([Vue 2] babel, router, eslint)
  aa ([Vue 3] babel, eslint)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

 npm install vue-virtual-scroll-list --save

プロジェクト名/
           ├─ src/
                ├─ App.vue ←メインロジックを記述
                ├─ main.js ←変更なし
                ├─ Item.vue ←追加            

<template> ①
	<div style="display: flex;border-bottom:solid 1px;">
		<div ref="id" style="width:100px;border-right:solid 1px;">{{ source.id }}</div>
		<div ref="text" style="width:100px;">{{ source.text }}</div>
	</div>
</template>

<script>
  export default {
    name: 'item-component',
    props: {
      index: { ②
        type: Number
      },
      source: { ③
        type: Object,
        default () {
          return {}
        }
      }
    }
  }
</script>

<template>
  <div id="app">
    <center>
    <div style="width:250px;border:solid 1px;">
      <div style="display: flex;border-bottom:solid 1px;background:lightgray">
        <div style="width:100px;border-right:solid 1px;">ID</div>
        <div style="width:100px;">タイトル</div>
      </div>
      <virtuallist ref="vlist" style="height: 360px; overflow-y: auto;"  ①
        :data-key="'id'" 
        :data-sources="items" 
        :data-component="itemComponent"
        v-on:tobottom="onScrollToBottom"
      />
    </div>
    </center>
  </div>
</template>

<script>
import virtuallist from 'vue-virtual-scroll-list'　②
import Item from './Item' ③

export default {
  name: 'App',
  components: {
    virtuallist　④
  },
  data() {
    return {　⑤
      itemComponent: Item,
      items: [],
      itemCounter:1
    }
  },
  created(){ ⑥
    for(let i = this.itemCounter; i <= 50;this.itemCounter++, i++)
    {
      this.items.push({
        id: i,
        text: 'テキスト'+ i,
        });
    }
  },

  methods:{
    onScrollToBottom(){　⑦

      for(let i = this.itemCounter;i<=this.itemCounter + 50; this.itemCounte++, i++ ){
        this.items.push({
          id: i,
          text: 'テキスト'+ i,
        });
      }
      this.itemCounter += 50
    }
  }
}
</script>

<style>
 省略
}
</style>

//virtuallistタグへのrefをvlistとして設定し、その子要素にアクセスする必要があります。
//DOMの一番めのIDセルへアクセスしている例
this.$refs.vlist.$children[0].$children[0].$refs.id.style.background="red"

//DOMの2番目のIDセルへのアクセスしている例
this.$refs.vlist.$children[1].$children[0].$refs.id.style.background="red"

//DOMの一番めのtextセルへアクセスしている例
this.$refs.vlist.$children[0].$children[0].$refs.text.style.background="red"

//DOMの2番目のtextセルへのアクセスしている例
this.$refs.vlist.$children[1].$children[0].$refs.text.style.background="red"