Say I have a group of cars and I want to display each row...3 seconds at a time. How can I do this in Vuejs2?
<tbody>
<tr v-for="(car) in cars">
<td><img v-bind:src="car.photo" width="40px" height="40px" alt=""></td>
<td><router-link :to="{path:'/car/' + car.id}" >{{ car.name }}</router-link></td>
<td>{{ car.make }}</td>
<td></td>
<td>{{ car.created }}</td>
</tr>
</tbody>
something like this.
currentCarIndex.currentCarIndex every 3 secondsv-for and v-if shouldn't be used together, so I add a <template> tag as an empty wrapper to execute v-for
<template>
<tbody>
<template v-for="(car,i) in cars">
<tr :key="i" v-if="i<=currentCarIndex">
<td><img v-bind:src="car.photo" width="40px" height="40px" alt=""></td>
<td>
<router-link :to="{path:'/car/' + car.id}">{{ car.name }}</router-link>
</td>
<td>{{ car.make }}</td>
<td></td>
<td>{{ car.created }}</td>
</tr>
</template>
</tbody>
</template>
<script>
export default {
data() {
return {
currentCarIndex: 0,
cars: "..."
};
},
mounted() {
const interval = setInterval(() => {
if (this.currentCarIndex + 1 < this.cars.length) this.currentCarIndex++;
else clearInterval(interval);
}, 3000);
}
};
</script>
v-if="i<=currentCarIndex" will doI was having this exact problem a couple of hours ago on an app I'm working on. I have a list of reviews and I wanted the reviews to display at interval so that it looks like the list is 'filled in' top down so that I can create a cascading effect. Something like this:
The documentations points out that you can use transition-group but personally I wasn't able to get them working for me so what I did is I created a wrapper component with a delay property on it and I passed in the time the component should wait before rendering. I did this using a simple v-if in the component's template.
What you could do is add a show-in and visible-for prop to a wrapper component like this:
<flashing-row v-for="(car, i) in cars" :show-in="i * 3000" :visible-for="2900">
// Stuff inside my row here....
</flashing-row>
and then define flashing-row like this:
Vue.component('flashing-row', {
props: {
showIn: {
type: Number,
required: true,
},
visibleFor: {
type: Number,
required: true,
},
},
data() {
return {
isVisible: false,
};
},
created() {
setTimeout(() => {
// Make component visible
this.isVisible = true;
// Create timer to hide component after 'visibleFor' milliseconds
setTimeout(() => this.isVisible = false, this.visibleFor);
}, this.showIn);
},
template: '<tr v-if="isVisible"><slot></slot></tr>'
});
You can see an example of the code in JSFiddle. This approach is especially good because:
visible-for prop from the component and the associated setTimeout.