element plus 無限ローディング

毎回やってるが、無限ローディングをしたい。

もう面倒なので element plus の無限ローディングを使う。
これを使いデータをポップアップ表示させることで、ページ間の移動がなくなり、
戻り先の設定をする必要がなくなるので楽。

まず、laravelは普通に読み出す。

laravel

hoge.php

    public static function show(request $request)
    {

        $sql = User::query();//単数形 User

        $limit = 5;
        if(!empty($request->limit)){
            $limit = $request->limit;
        }

        $res = $sql
            ->paginate($limit);//ページは1から始まる

        return response()->json(['res'=> $res]);
    }

同じページを連続で読み出すので、ひたすらうざい。
ということで同じページは読み込ませないように。
readedUrlに一度読み出したpageを読み込ませないよう配列にツッコんでおく。

hoge.vue

<template>

    <div class="infinite-list-wrapper">

        <ul
            v-infinite-scroll="load"
            class="list"
            :infinite-scroll-disabled="disabled"
            infinite-scroll-distance="0"
        >
            <li v-for="(v,key) in userData" :key="key" class="list-item">
                <div>
                    <a style="cursor:pointer">{{v.id}} {{v.name}}</a>
                </div>
            </li>
        </ul>

        <p v-if="loading" style="background-color: red;">Loading...</p>
        <p v-if="noMore">すべて読み込みました</p>
    </div>

</template>





<script lang="ts" setup>
import {  reactive,computed, ref ,onMounted } from 'vue'


const axiosUrl = ref(`/users/show`)
const userData = ref(reactive([]))

const loading = ref(false)
const noMore = ref(false)
const disabled = ref(false)


//同じページを読み込ませない
const readedUrl = reactive<string[]>([]);




const load = () => {
    loading.value = true
    setTimeout(() => {
        getUserShow()
        loading.value = false
    }, 200)

}


const getUserShow = () => {

    if (!readedUrl.includes(axiosUrl.value)) {
        readedUrl.push(axiosUrl.value);

        console.log("ページを読み込みます" + axiosUrl.value);
        axios.post(axiosUrl.value)
            .then(response => {
                if(response.data.res.next_page_url != null){
                    axiosUrl.value = response.data.res.next_page_url;
                    userData.value.push(...response.data.res.data);
                } else {
                    disabled.value = true
                    noMore.value = true
                }
            })
            .catch(error => {
                // エラーを処理する
                disabled.value = true
                noMore.value = true
                console.error(error)
            })
    }
}



</script>

<style>
.infinite-list-wrapper {
    height: 50%;
    text-align: center;
}
.infinite-list-wrapper .list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list-wrapper .list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
}
.infinite-list-wrapper .list-item + .list-item {
    margin-top: 10px;
}
</style>