Bootstrap Vue: How to hide/show checkboxes when b-tab is active/inactive?

<b-tabs content-class="mt-3" justified>  
 
    <b-tab title="First" active><p>I'm the first tab</p></b-tab>  
 
    <b-tab title="Second"><p>I'm the second tab</p></b-tab>  
 
    <b-tab title="Third"><p>I'm the third tab</p></b-tab>  
 
  </b-tabs>  
 
<input type="checkbox" name="first"/>  
 
<input type="checkbox" name="second"/>  
 
<input type="checkbox" name="third"/>

I need: when first tab is active, first input is shown, but second and third inputs are hidden; when second tab is active, second input is shown, but first and third inputs are hidden; when third tab is active, third input is shown, but first and second inputs are hidden. How can I do that using vue.js but without using v-for loops?

Solution

You can simply put your checkboxes into the tabs.

<b-tabs content-class="mt-3" justified>  
    <b-tab title="First" active>
      <b-form-checkbox>First</b-form-checkbox>
    </b-tab>  
    <b-tab title="Second">      
      <b-form-checkbox>Second</b-form-checkbox>
    </b-tab>  
    <b-tab title="Third">
      <b-form-checkbox>Third</b-form-checkbox>
    </b-tab>  
</b-tabs>

Or, if you really need to control something outside the tabs based on the selected tab, then use the v-model with tabIndex (External controls using v-model)

v-model="tabIndex"

and

<b-form-checkbox v-show="tabIndex == 0">First</b-form-checkbox>

The playground shows both variants.

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 content-class="mt-3" justified v-model="tabIndex">  
      <b-tab title="First" active>
        <b-form-checkbox>First</b-form-checkbox>
      </b-tab>  
      <b-tab title="Second">      
        <b-form-checkbox>Second</b-form-checkbox>
      </b-tab>  
      <b-tab title="Third">
        <b-form-checkbox>Third</b-form-checkbox>
      </b-tab>  
  </b-tabs>  
  <hr/>
   <b>tabIndex:</b> {{tabIndex}}
  <b-form-checkbox v-show="tabIndex == 0">First</b-form-checkbox>
  <b-form-checkbox v-show="tabIndex == 1">Second</b-form-checkbox>
  <b-form-checkbox v-show="tabIndex == 2">Third</b-form-checkbox>
</div>