试图在第二步显示第一种和第二种形式答案

【问题标题】：trying to display first and second form at second step试图在第二步显示第一种和第二种形式
【发布时间】：2021-02-19 13:20:34
【问题描述】：

在这里，我为多步表单编写了代码，并且在这里一切正常。但是在这里，当我们处于第一步时，如果我们单击下一步按钮，则会显示下一步表单，所以在这里我想显示第一步表单以及下一步表单。这意味着当我们从第一步单击下一步按钮时，下一步应该是第一种形式和第二种形式

<div id="app">
  <form>
  <div v-if="step === 1">

    <h1>Step One</h1>
    <p>
    <legend for="name">Your Name:</legend>
    <input id="name" name="name" v-model="registration.name">
    </p>

    <p>
    <legend for="email">Your Email:</legend>
    <input id="email" name="email" type="email" v-model="registration.email">
    </p>

    <button @click.prevent="next()">Next</button>
    
  </div>

  <div v-if="step === 2">
    <h1>Step Two</h1>
    <p>
    <legend for="street">Your Street:</legend>
    <input id="street" name="street" v-model="registration.street">
    </p>

    <p>
    <legend for="city">Your City:</legend>
    <input id="city" name="city" v-model="registration.city">
    </p>

    <p>
    <legend for="state">Your State:</legend>
    <input id="state" name="state" v-model="registration.state">
    </p>

    <button @click.prevent="prev()">Previous</button>
    <button @click.prevent="next()">Next</button>

  </div>

  <div v-if="step === 3">
    <h1>Step Three</h1>
    
    <p>
    <legend for="numtickets">Number of Tickets:</legend>
    <input id="numtickets" name="numtickets" type="number" v-model="registration.numtickets">
    </p>

    <p>
    <legend for="shirtsize">Shirt Size:</legend>
    <select id="shirtsize" name="shirtsize" v-model="registration.shirtsize">
      <option value="S">Small</option>
      <option value="M">Medium</option>
      <option value="L">Large</option>
      <option value="XL">X-Large</option>
    </select>
    </p>

    <button @click.prevent="prev()">Previous</button>
    <button @click.prevent="submit()">Save</button>
    
  </div>
  </form>

vue.js

const app = new Vue({
  el:'#app',
  data() {
    return {
      step:1,
      registration:{
        name:null,
        email:null,
        street:null,
        city:null,
        state:null,
        numtickets:0,
        shirtsize:'XL'
      }
    }
  },
  methods:{
    prev() {
      this.step--;
    },
    next() {
      this.step++;
    },
    submit() {
      alert('Submit to blah and show blah and etc.');      
    }
  }
});

【问题讨论】：

标签： html vue.js

【解决方案1】：

由于每次next() 调用都会增加step，因此您可以将条件渲染更改为在步骤至少某个索引时进行渲染：

<div v-if="step >= 1">...</div>
<div v-if="step >= 2">...</div>
<div v-if="step >= 3">...</div>

demo

【讨论】：