如何跳过第三步并跳到第四步

Question

这里我已经用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>

Answer 1

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

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--
}
}