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-showwith并使用比较而不是赋值：v-for&nbsp; <b-tab title="Subject" v-for="animal in animals" :key="animal" >&nbsp; &nbsp; &nbsp; &nbsp; <b-card-text v-show="animal==1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <enrollment-form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </enrollment-form>&nbsp; &nbsp; &nbsp; &nbsp; </b-card-text>&nbsp; &nbsp; &nbsp; </b-tab>你的数据应该是这样的：&nbsp; data: () => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; step: 2,&nbsp; &nbsp; &nbsp; animals: [...Array(3)].map((_,i)=>i+1),&nbsp; &nbsp; }&nbsp; },