Currently, I am in the process of creating a filter and its corresponding labels. The objective is to allow users to select from various options when they click on the first row. While I have successfully implemented the functionality to display choices for the active button (2nd row), I am facing an issue where it only retrieves the choices for the first button labeled "Stage Performance". It appears that I need to update the ActiveIndex to determine which button's choices should be extracted. How can I modify the activeIndex when the user clicks on the 1st row button?
To get a better visual understanding, take a look at the design: https://i.stack.imgur.com/zrQsu.png
This is the template structure:
<swiper
:slidesPerView="5"
:navigation="true"
:modules="modules"
class="mySwiper"
>
// Loop through labels
<swiper-slide
v-for="(label, index) in labels"
:key="index"
@click="handleActiveIndex(index)"
>
<button class="button-text">{{ label.type }}</button>
</swiper-slide>
</swiper>
// Display sub-labels based on active button selection
<div class="choice-list">
<div
class="choice"
v-for="(choice, index) in labels[activeIndex].choices"
:key="index"
>
{{ choice }}
</div>
</div>
The script involved looks like this:
setup() {
/* Filter labels */
const activeIndex = ref(0);
const labels = ref([
{
type: "Stage Performance",
choices: [
"All",
"Music",
"Chinese Opera",
"Dance",
"Theatre",
"Multi-Arts",
"Pop Concerts",
],
},
{
type: "Festivals",
choices: [
"All",
"International Arts Carnival",
"New Vision Arts Festival",
"New Vision Arts Festival",
"Chinese Opera Festival",
"Hong Kong Pop Culture Festival",
"Other Festivals / Series Events",
],
},
// Additional objects... //
]);
return {
modules: [Pagination, Navigation],
activeIndex,
labels,
};
}