I have a Filter tab component that I use in various routes. When I click on a tab, it becomes active. After clicking on one tab, I want it to remain active in other routes as well. How can I achieve this? Any suggestions or articles would be greatly appreciated.
https://i.sstatic.net/JI1II.png
Below is my code for the filter tab component:
<template>
<div class="filter-container">
<div
v-for="(item, index) in items"
:key="index"
v-ripple
:identifier="random()"
:class="[`item i${item.id}`, { 'active': activeId == item.id }]"
@click="scrollInto(item.id, $event)"
>
{{ item.label }}
</div>
</div>
</template>
<script>
export default {
name: 'FilterTabs',
props: {
items: {
type: Array,
required: true,
},
},
data() {
return {
activeId: this.items.length ? this.items[0].id : null,
};
},
watch: {
items(newValue, oldValue) {
this.activeId = newValue[0].id;
},
},
methods: {
scrollInto(id, event) {
this.activeId = id;
setTimeout(() => {
const identifier = event.target.attributes.identifier.value;
document.querySelectorAll(`[identifier='${identifier}']`)[0].scrollIntoView({
behavior: 'smooth', block: 'center', inline: 'center',
});
// var selectors = document.querySelectorAll(`.i${id}`);
// selectors.forEach((node) => {
// node.scrollIntoView({
// behavior: 'smooth', block: 'center', inline: 'center',
// });
// })
}, 100);
this.$emit('onTagChange', id);
},
random() {
return Math.random().toString(36).substr(2, 9) + '-' + Math.random().toString(36).substr(2, 9);
},
},
};
</script>