Hello, I am currently working on implementing a dropdown feature on my website using Vue. As a newcomer to Vue, I am using conditional rendering to display different sets of cards based on user selection. For example, the dropdown options include Cars, Motos, and Bikes. When a user clicks on "Cars," a list of cars is displayed in the dropdown, and similarly for the other options.
<h2 class="text-center my-font text-light"><button v-on:click="toggle = !toggle" class="badge badge-danger menu-label-size w-50">Cars</button></h2>
<div v-if="toggle" class="row">
<div class="col-12">
<div class="cards-item text-center ">
<div v-for="item in cars" ::key="item.id" class="card" style="width: 10rem;">
<img :src="'./images/cars/img' + item.img + '.png'" class="card-img-top img-fluid" alt="item.name">
<div class="card-body d-flex flex-column justify-content-end">
<h4 class="card-title my-font">{{ item.name }}</h4>
<p class="badge-danger font-weight-bold">{{ item.price }}</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="text-center my-font text-light"><button v-on:click="toggle = !toggle" class="badge badge-danger menu-label-size w-50">Motos</button></h2>
<div v-if="toggle" class="row">
<div class="col-12">
<div class="cards-item text-center">
<div v-for="item in motos" ::key="item.id" class="card" style="width: 10rem;">
<img :src="'./images/motos/img' + item.img + '.png'" class="card-img-top img-fluid" alt="item.name">
<div class="card-body d-flex flex-column justify-content-end">
<h4 class="card-title my-font">{{ item.name }}</h4>
<p class="badge-danger font-weight-bold">{{ item.price }}</p>
</div>
</div>
</div>
</div>
</div>
<h2 class="text-center my-font text-light"><button v-on:click="toggle = !toggle" class="badge badge-danger menu-label-size w-50">Bikes</button></h2>
<div v-if="toggle" class="row">
<div class="col-12">
<div class="cards-item text-center">
<div v-for="item in bikes" ::key="item.id" class="card" style="width: 10rem;">
<img :src="'./images/bikes/img' + item.img + '.png'" class="card-img-top img-fluid" alt="item.name">
<div class="card-body d-flex flex-column justify-content-end">
<h4 class="card-title my-font">{{ item.name }}</h4>
<p class="badge-danger font-weight-bold">{{ item.price }}</p>
</div>
</div>
</div>
</div>
</div>
My script:
const app = new Vue({
el: '#app',
data: {
show: false,
cars: [{data}],
motos: [{data}],
bikes: [{data}],
},
})
However, when clicking on "Motos," it only closes the "Cars" dropdown. How can I make it dynamic so that when "Motos" is clicked, it opens while "Cars" closes, and vice versa for "Bikes"?