I am currently working on implementing Buefy Steps in a Vue project. The Buefy steps are functioning correctly, but I am facing an issue where the 'Submit' button does not progress to the next step (e.g., from "Account" to "Profile").
App.vue:
<template>
<div id="app">
<section>
<div class="block">
<b-field v-if="hasNavigation" grouped group-multiline>
<b-field label="Prev icon">
<b-select v-model="prevIcon">
<option value="chevron-left">Chevron</option>
<option value="arrow-left">Arrow</option>
</b-select>
</b-field>
<b-field label="Next icon">
<b-select v-model="nextIcon">
<option value="chevron-right">Chevron</option>
<option value="arrow-right">Arrow</option>
</b-select>
</b-field>
<b-field label="Label position">
<b-select v-model="labelPosition">
<option value="bottom">Bottom</option>
<option value="right">Right</option>
<option value="left">Left</option>
</b-select>
</b-field>
<b-field label="Mobile mode">
<b-select v-model="mobileMode">
<option :value="null">-</option>
<option value="minimalist">Minimalist</option>
<option value="compact">Compact</option>
</b-select>
</b-field>
</b-field>
</div>
<b-steps
v-model="activeStep"
:animated="isAnimated"
:rounded="isRounded"
:has-navigation="hasNavigation"
:icon-prev="prevIcon"
:icon-next="nextIcon"
:label-position="labelPosition"
:mobile-mode="mobileMode"
>
<b-step-item step="1" label="Account" :clickable="isStepsClickable">
<h1 class="title has-text-centered">Account</h1>
<form ref="loginForm" class="form-horizontal form-material" @submit.stop.prevent>
<input type="hidden" name="customfield" class="form-control" :value="this.id">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label has-text-black">Name *</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<b-field>
<input maxlength="20" class="input h" type="text" placeholder>
</b-field>
</div>
</div>
</div>
</div>
<div class="field is-grouped is-grouped-right"></div>
<div class="field is-grouped is-grouped-centered">
<p class="control">
<a class="button is-primary" @click.prevent="next.action">Submit</a>
</p>
<p class="control">
<a class="button is-light">Cancel</a>
</p>
</div>
</form>
</b-step-item>
<b-step-item
step="2"
label="Profile"
:clickable="isStepsClickable"
:type="{'is-success': isProfileSuccess}"
>
<h1 class="title has-text-centered">Profile</h1>Lorem ipsum dolor sit amet.
</b-step-item>
<b-step-item step="3" :visible="showSocial" label="Social" :clickable="isStepsClickable">
<h1 class="title has-text-centered">Social</h1>Lorem ipsum dolor sit amet.
</b-step-item>
<b-step-item
:step="showSocial ? '4' : '3'"
label="Finish"
:clickable="isStepsClickable"
disabled
>
<h1 class="title has-text-centered">Finish</h1>Lorem ipsum dolor sit amet.
</b-step-item>
</b-steps>
</section>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>