Skip to content

Instantly share code, notes, and snippets.

@oumoussa98

oumoussa98/index.html

Last active October 19, 2023 17:28
Show Gist options
  • Save oumoussa98/7184e74bab47d78a60a8bdf0aea68d96 to your computer and use it in GitHub Desktop.
Save oumoussa98/7184e74bab47d78a60a8bdf0aea68d96 to your computer and use it in GitHub Desktop.
Download ZIP
infinite loading example
Raw
index.html
<html>
<head>
<script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
<script src="https://unpkg.com/v3-infinite-loading@1.2.2/lib/v3-infinite-loading.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/v3-infinite-loading@1.2.2/lib/style.css" />
<style>
#app {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px;
margin: 20px auto 20px auto;
max-height: 600px;
max-width: 400px;
overflow-y: scroll;
}
.result {
font-weight: 300;
width: 80%;
padding: 20px;
text-align: center;
background: #eceef0;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="app">
<div class="result" v-for="comment in comments" :key="comment.id">
<div>{{ comment.email }}</div>
<div>{{ comment.id }}</div>
</div>
<infinite-loading target="#app" @infinite="load"></infinite-loading>
</div>
<script>
const { ref, createApp } = Vue;
const app = createApp({
setup() {
let comments = ref([]);
let page = 1;
const load = async $state => {
console.log("loading...");
try {
const response = await fetch("https://jsonplaceholder.typicode.com/comments?_limit=10&_page=" + page);
const json = await response.json();
if (json.length < 10) $state.complete();
else {
comments.value.push(...json);
$state.loaded();
}
page++;
} catch (error) {
$state.error();
}
};
return {
load,
comments,
page,
};
},
});
app.component("infinite-loading", V3InfiniteLoading.default);
app.mount("#app");
</script>
</body>
</html>
@agm1984
Copy link

agm1984 commented Oct 19, 2023

I'm getting an error in the watcher about identifier being undefined. I don't see anything in the examples or docs that talks about what identifier is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment