I am currently working on a project using Vuejs and Nuxt, and I want to incorporate a video into a carousel component alongside jpeg and png images. The carousel component code snippet below demonstrates the setup:
<template>
<section>
<v-card
class="mx-auto"
color="#26c6da"
dark
max-width="1200"
>
<v-carousel>
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
</v-carousel>
</v-card>
</section>
<script>
export default {
data() {
return {
items: [ {
id: '1',
content: '<iframe width="560" height="315" ' +
'src="https://www.youtube.com/embed/zjcVPZCG4sM" ' +
'frameborder="0" allow="autoplay; encrypted-media" ' +
'allowfullscreen></iframe>'
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
}
]
};
}
};
</script>
</template>
For more information, refer to this Stack Overflow answer on Displaying video in Nuxt carousel component and this CodePen example: https://codepen.io/anon/pen/MqBEqb
To display a video, you need:
<v-carousel-item v-for="item in items" :key="item.id" v-html="item.content">
And for an image (jpg), use:
<v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
How can I dynamically decide between displaying a video or an image based on the object within the exported data array?