[Vuejs]-How to make these slots display one at the time?

by

1👍

✅

There are many ways to achieve, what you want to do. I will show you below an example (Simple) way to achieve what you want.

In your slide.vue, accept a prop which is display a boolean, based on which the slide will be displayed.

<template>
  <div class="slide" v-if="display">
    <slot />
  </div>
</template>
<script setup>
defineProps({
  display: {
    type: Boolean,
    default: false,
  },
});
</script>

In your grandparent component, you can use a v-for to loop through the slides array. In my example, i have an array of objects in slides which i am looping through. You could have other content too.

Now i have the showslide reactive ref whose initial value is 0 and i have added buttons to navigate through the slides by incrementing or decrementing. The display prop will be true only when showslide === index of the slides array.

<template>
  <Carousel>
    <div v-for="(slide, index) in slides" :key="index">
      <Slide :display="showslide === index">{{ slide.content }}</Slide>
    </div>
  </Carousel>
  <button @click="display = (display + 1) % slides.length">Next</button>
  <button @click="display = (display - 1) % slides.length">Previous</button>
</template>

<script setup>
import Carousel from "@/components/Carousel.vue";
import Slide from "@/components/Slide.vue";
import { ref } from "vue";

const slides = [{ content: 1 }, { content: 2 }, { content: 3 }];

const showslide = ref(0);
</script>

<style></style>

So with this code, at first, the 0th slide will be shown and when you click next first slide and so on.

Hope it gives you an idea of how to achieve what you want.

👤thezohaan

Leave a comment