Bulma Steps 在点击提交按钮后没有进入下一步

Question

我正在尝试在 Vue 中创建一个 Buefy Steps。Buefy 步骤已经开始工作，但Submit按钮不会前进到下一步（例如，从“帐户”到“配置文件”）。应用程序视图：<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">

Answer 1

看起来您将b-step的navigation插槽的内容移入b-step-item并忘记包含定义按钮操作所需的template的插槽范围的父项。即使使用，那也行不通，因为没有插槽。nextSubmittemplateb-step-itemnavigation

解决方案是将这些按钮放在 的b-step插槽中navigation：

<b-step>

  <b-step-item>...</b-step-item>

  <b-step-item>...</b-step-item>

  <b-step-item>...</b-step-item>

  <template slot="navigation" slot-scope="{previous, next}">

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

  </template>

</b-step>