Hey there, I'm just starting out with Vue3 and I have a bit of a challenge. I've got an SVG image with different parts, a data variable that changes when a particular part of the image is clicked, and some tabs (b-tabs). Is it possible to automatically open a specific tab based on which part of the SVG image is selected?
Below is a snippet of my code:
The SVG image
<rect
@click="openTab"
style="fill:#ff0000;stroke-width:0.264583"
id="limitations"
width="34.705162"
height="32.925407"
x="17.797518"
y="49.83305" />
data() {
return {
blockClicked: ''
}
},
This is my method:
methods: {
openTab(block) {
this.blockClicked = block.target.id;
console.log(this.blockClicked);
}
}
I've attempted using :active in the following way but it hasn't been successful:
<b-tabs pills card>
<b-tab :active="this.blockClicked === 'limitations'">
<template #title>
Limits
</template>
</b-tab>
</b-tabs>