How can I activate b-tab on condition?

Question

I am new in VUE3. I have an SVG image with some parts, data variable which is changing when click on particular part of the image and b-tabs. Is it possible to open specific tab depending on what is selected on the SVG image?

This is part 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 have tried with :active like this but it doesn't work:

<b-tabs pills card>
            <b-tab :active="this.blockClicked === 'limitations'">
                <template #title>
                    Limits
                  </template>
            </b-tab>
</b-tabs>

Answer 1

I assume you mean Bootstrap Vue Tabs

Use the v-model to control the Tabs externally (External controls using v-model)

v-model="tabIndex"

and

<b-button @click="tabIndex = 0">Tab 1</b-button>

Playground

Vue.use(BootstrapVue)
new Vue({
  el: '#app',
  data() {
    return { tabIndex: 0 }
  }
})

#app { line-height: 2; }
[v-cloak] { display: none; }
label { margin-left: 8px; }

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load Vue followed by BootstrapVue -->
<script src="https://unpkg.com/vue@^2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-tabs pills card v-model="tabIndex">  
      <b-tab title="First" active>
        First
      </b-tab>  
      <b-tab title="Second">      
        Second
      </b-tab>  
      <b-tab title="Third">
        Third
      </b-tab>  
  </b-tabs>  
  <hr/>
   <b>tabIndex:</b> {{tabIndex}}<br/>
    <b-button variant="outline-primary" size="sm" @click="tabIndex = 0">Tab 1</b-button>
    <b-button variant="outline-primary" size="sm" @click="tabIndex = 1">Tab 2</b-button>
    <b-button variant="outline-primary" size="sm" @click="tabIndex = 2">Tab 3</b-button>
</div>