I have a component for my Carousel:
<template>
<div class="caro">
<v-carousel >
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
>
<div class="title">
<v-btn color="error" dark large></v-btn>
</div>
</v-carousel-item>
</v-carousel>
<p> Configure the rack in few easy steps. Click on the part you want.
to start from</p>
</div>
</template>
<script>
export default {
props:['showRackSec', 'showSubrackSec', 'showParts', 'showDatabase'],
data () {
return {
items: [
{
id: 'rack', src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg', title:'Rack Section'
},
{
id: 'subrack', src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg' , title: 'Subrack Section'
},
{
id: 'parts', src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' , title: 'Parts Section'
},
{
id: 'admin', src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg' , title: 'Admin Section'
}
]
}
}
I have another component (parent) that passes the props to Carousel.vue. All these props ('showRackSec', 'showSubrackSec', 'showParts', 'showDatabase') are initially false set by parent component.
I want to set them to true by clicking on the button on the carousel. For example when carousel is showing the "Subrack Section" and I click on the button it should set "showSubrackSec" to true.
What's the best way to do it?
Aucun commentaire:
Enregistrer un commentaire