时间戳

首页 > 解决方案 > 如何跳过第三步跳到第四步

vue.js - 如何跳过第三步跳到第四步

问题描述

这里我在 vue.js 中编写了代码。我试图跳过第三步到第四步。就像我们正在导航多步表单一样，我们处于第二步，如果我们按下一步按钮从第二步开始，那么它应该直接导航到第四步。表示跳过第三步。因此，如果有人有想法请帮助我，我正在努力实现这一目标

<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="next()">Next</button>  
    
  </div>
  
  <div v-if="step === 4">
    <h1>Step Four</h1>
    <button @click.prevent="prev()">Previous</button>
    <button @click.prevent="next()">Next</button>

  </div>
  
  <div v-if="step === 5">
    <h1>Step Five</h1>
    <button @click.prevent="prev()">Previous</button>
    <button @click.prevent="submit()">Save</button>

  </div>
  </form>
</div>

Vue.js

<script>
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.');      
    }
  }
});
</script>

标签： vue.js

解决方案

您可以通过分配所需的页面来轻松实现它：

this.step = 4 // or another site you want to set

在函数中传递一个参数next()：

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

next(currentStep) {
 if (currentStep === 3) {
     this.step = 4 // jump from step 2 to step 4
  } else {
     this.step++;
  }
}

作为一个快速的建议

更新导航回来：

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

prev(currentStep) {
 if (currentStep === 4) {
     this.step = 2 // jump from step 4 to step 2
  } else {
     this.step--
  }
}

推荐阅读