Vue render element based on given property

Question

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),
    }
  },

try animal === 1 instead animal = 1

Ballon Ura
– Ballon Ura

2020-12-07 10:33:54 +00:00
Commented Dec 7, 2020 at 10:33 — Ballon Ura
– Ballon Ura, Commented Dec 7, 2020 at 10:33

score 1 · Accepted Answer · 2020-12-07 10:46:02Z

1

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),
    }
  },

edited Dec 7, 2020 at 10:46

answered Dec 7, 2020 at 10:36

user14340642

Sign up to request clarification or add additional context in comments.

5 Comments

WeeniehuahuaXD Over a year ago

this seems like a better approach, but I'm left with the problem that I still see tab titles and none of the tabs have content. I edited/added my data properties as well if that helps.

WeeniehuahuaXD Over a year ago

That pretty much works/does what I want, only issue I have is that the actual "tab" (saying 'subject') still shows up. I am able to only display the given content now with this, but still see the tab titles. Unless I am missing something?

user14340642 Over a year ago

do you mean each tab should have the index as title? if yes you could do :title="animal"

WeeniehuahuaXD Over a year ago

Oh, I just wanted to hide a given tab while not in use at all actually.

user14340642 Over a year ago

what about :title="`${animal===step?'Subject':''}`"?

Collectives™ on Stack Overflow

Vue render element based on given property

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related