I am using vuetify timeline component from vuetify framework.
Hi, I have a sample similar to vuetify timeline sample(https://codepen.io/luizalves/pen/bGoxEvz?editors=101).
My problem is that when there are many items, the dom take a long time to render timeline-items when scrolling down.
How could I use v-virtual-scroll to solve it or somethig as lazy loading?
Code
<div id="app">
<v-app id="inspire">
<v-timeline
align-top
:dense="$vuetify.breakpoint.smAndDown"
>
<v-timeline-item
v-for="(item, i) in items"
:key="i"
:color="item.color"
:icon="item.icon"
fill-dot
>
<v-card
:color="item.color"
dark
>
<v-card-title class="text-h6">
Lorem Ipsum Dolor
</v-card-title>
<v-card-text class="white text--primary">
<p>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.</p>
<v-btn
:color="item.color"
class="mx-0"
outlined
>
Button
</v-btn>
</v-card-text>
</v-card>
</v-timeline-item>
</v-timeline>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: [
{
color: 'red lighten-2',
icon: 'mdi-star',
},
{
color: 'purple darken-1',
icon: 'mdi-book-variant',
},
{
color: 'green lighten-1',
icon: 'mdi-airballoon',
},
{
color: 'indigo',
icon: 'mdi-buffer',
},
],
}),
})