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

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

    }

  },