CODEWITHSUNDEEP
javascriptvue.jsfrontendbootstrap-vue
WeeniehuahuaXD
WeeniehuahuaXD

Reputation: 852

Vue render element based on given property

I have the below block

<div>
  <b-card no-body>
    <b-tabs pills card vertical no-key-nav v-model="step">
      <b-tab title="Subject" v-for="animal in animals" :key="animal" v-show="animal=1">
        <b-card-text>
          <enrollment-form>
          </enrollment-form>
        </b-card-text>
      </b-tab>
    </b-tabs>
  </b-card>
</div>

I am just trying to show one given component at a time. Problem is, I'm getting all tabs rendered at the same time. I was jsut going to use buttons to iterate "step" up as input comes in.

EDIT

Data below
  data: () => {
    return {
      step: 2,
      animals: Array(3),
    }
  },

Upvotes: 0

Views: 207

Answers (1)

user14340642
user14340642

Reputation:

Don't combine v-show with v-for in the same element and use comparison instead of assignment :

  <b-tab title="Subject" v-for="animal in animals" :key="animal" >
        <b-card-text v-show="animal==1">
          <enrollment-form>
          </enrollment-form>
        </b-card-text>
      </b-tab>

Your data should be like :



  data: () => {
    return {
      step: 2,
      animals: [...Array(3)].map((_,i)=>i+1),
    }
  },

Upvotes: 1

Related Questions