Vue.js多步骤表单优化需求：点击下一步按钮时同时展示当前步骤与下步骤表单

Hey there! Let's adjust your multi-step form to keep previous steps visible when moving forward. Here's how you can make that happen:

Key Adjustments Needed #

Instead of only showing the exact current step with v-if="step === n", we'll display all steps up to the current one using v-if="step >= n". This way, clicking Next from step 1 will keep step 1 visible while adding step 2, and so on. We'll also tweak button visibility to ensure only relevant actions are available at each stage.

Modified Code #

HTML

<div id="app">
  <form>
    <!-- Step 1: Visible once we're on step 1 or beyond -->
    <div v-if="step >= 1" class="step-container">
      <h1>Step One</h1>
      <p>
        <label for="name">Your Name:</label>
        <input id="name" name="name" v-model="registration.name">
      </p>
      <p>
        <label for="email">Your Email:</label>
        <input id="email" name="email" type="email" v-model="registration.email">
      </p>
      <!-- Only show Next button when we're still on step 1 -->
      <button v-if="step === 1" @click.prevent="next()">Next</button>
    </div>

    <!-- Step 2: Visible once we're on step 2 or beyond -->
    <div v-if="step >= 2" class="step-container">
      <h1>Step Two</h1>
      <p>
        <label for="street">Your Street:</label>
        <input id="street" name="street" v-model="registration.street">
      </p>
      <p>
        <label for="city">Your City:</label>
        <input id="city" name="city" v-model="registration.city">
      </p>
      <p>
        <label for="state">Your State:</label>
        <input id="state" name="state" v-model="registration.state">
      </p>
      <!-- Previous button shows for steps 2+, Next only when we're on step 2 -->
      <button @click.prevent="prev()">Previous</button>
      <button v-if="step === 2" @click.prevent="next()">Next</button>
    </div>

    <!-- Step 3: Visible once we reach step 3 -->
    <div v-if="step >= 3" class="step-container">
      <h1>Step Three</h1>
      <p>
        <label for="numtickets">Number of Tickets:</label>
        <input id="numtickets" name="numtickets" type="number" v-model="registration.numtickets">
      </p>
      <p>
        <label for="shirtsize">Shirt Size:</label>
        <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>
      <!-- Previous button shows for step 3, Save button only here -->
      <button @click.prevent="prev()">Previous</button>
      <button @click.prevent="submit()">Save</button>
    </div>
  </form>
</div>

JavaScript

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() {
      // Prevent step from dropping below 1
      if(this.step > 1) {
        this.step--;
      }
    },
    next() {
      // Prevent step from going above 3
      if(this.step < 3) {
        this.step++;
      }
    },
    submit() {
      alert('Submit to blah and show blah and etc.');
    }
  }
});

Breakdown of Changes #

1. Step Visibility: Swapped step === n for step >= n in each step's v-if condition. This ensures all steps up to the current one stay visible as you progress.
2. Button Logic: Added v-if="step === n" to Next/Save buttons so only the right action is available at each stage. For example, the step 1 Next button only shows when you're still on step 1, and the Save button only appears once you reach step 3.
3. Safeguards: Added checks in prev() and next() to stop the step value from going outside the 1-3 range (a small but useful guardrail).
4. Accessibility Fix: Changed <legend> to <label> since <legend> is meant to be used inside <fieldset> elements—this makes your form more accessible.

You can add some CSS (like borders or padding between .step-container elements) to make the multi-step flow even clearer visually!

内容的提问来源于stack exchange，提问作者Salima