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>&nbsp; <b-step-item>...</b-step-item>&nbsp; <b-step-item>...</b-step-item>&nbsp; <b-step-item>...</b-step-item>&nbsp; <template slot="navigation" slot-scope="{previous, next}">&nbsp; &nbsp; <div class="field is-grouped is-grouped-centered">&nbsp; &nbsp; &nbsp; <p class="control">&nbsp; &nbsp; &nbsp; &nbsp; <a class="button is-primary" @click.prevent="next.action">Submit</a>&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; <p class="control">&nbsp; &nbsp; &nbsp; &nbsp; <a class="button is-light">Cancel</a>&nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp; </template></b-step>