[Vue.js]Vue3対応無限スクロールプラグインのv3-infinite-loading使用例

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 v3-infinite-loading --save

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

<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>
    </div>
    <div id="box" style="width:250px;height: 360px; overflow-y: scroll;">
      ①
      <div style="display: flex;border-bottom:solid 1px;" v-for="item in reacData.items" :key="item.id">
        <div ref="id" style="width:100px;border-right:solid 1px;">{{ item.id }}</div>
        <div ref="text" style="width:100px;">{{ item.text }}</div>
      </div>
      <InfiniteLoading  @infinite="load" target="#box"> ②
        <template #complete>
        <span>読み込み終了</span>
        </template>
      </InfiniteLoading>
    </div>

    </center>
  </div>
</template>

<script>
import {　reactive, ref  } from "vue";　③
import InfiniteLoading from "v3-infinite-loading";　④

export default ({　⑤
  name: 'App',
  components: {　⑥
    InfiniteLoading,
  },

  setup() {

    const reacData = reactive({　⑦
      items: []
    });
   
    //Refs使用用に定義する ⑧
    const id = ref(null)
　  const text = ref(null)
  
    let itemCounter = 1;
  
    //スクローラーからコールされるデータ取得メソッド
    const load =  async($state) => {　⑨
      try {
       if( itemCounter >= 2000){
          $state.complete()
        }else{
          var data = []
          for(let i = itemCounter;i<=itemCounter + 30;  i++ ){
            data.push({
              id: i,
              text: 'テキスト'+ i,
            });
          }
          itemCounter += 30
          reacData.items = reacData.items.concat( data )
          $state.loaded()
      
        }
      } catch (error) {
        console.log("error");
        $state.error();
      }
     };
   
     //templateで使用するメソッド、変数をreturnで返す  
     return {　⑩
        reacData,
        load,
        id,
        text
     };
   }
});
</script>

<style>
  省略
</style>

//最上位のID属性の背景色を赤にする例 
id.value[0].style.background="red"

//2番目のID属性の背景色を赤にする例 
id.value[1].style.background="red"