基于给定属性的Vue渲染元素

Question

我有下面的块

<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>

我只是想一次显示一个给定的组件。问题是，我正在同时呈现所有选项卡。当输入进入时，我只是打算使用按钮来迭代“步进”。

编辑

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

Answer 1

不要将v-show 与v-for 组合在同一个元素中，并使用比较而不是赋值：

  <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>

你的数据应该是这样的：

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