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

Question

我正在尝试在 Vue 中创建一个 Buefy Steps。 Buefy 步骤已经开始工作，但 Submit 按钮不会前进到下一步（例如，从“帐户”到“个人资料”）。

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>

        <!-- <template v-if="customNavigation" slot="navigation" slot-scope="{previous, next}">
          <b-button
            outlined
            type="is-danger"
            icon-pack="fas"
            icon-left="backward"
            :disabled="previous.disabled"
            @click.prevent="previous.action"
          >Previous</b-button>
          <b-button
            outlined
            type="is-success"
            icon-pack="fas"
            icon-right="forward"
            :disabled="next.disabled"
            @click.prevent="next.action"
          >Next</b-button>
        </template>-->
      </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>

codesandbox

Answer 1

您似乎将 b-step 的 navigation 插槽的内容移到了 b-step-item 中，而忘记包含定义 template 的插槽范围的父级 template =15=]，Submit 按钮的操作需要。即使使用 template，那也行不通，因为 b-step-item 没有 navigation 插槽。

解决方案是将这些按钮放在 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>

updated codesandbox

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

Bulma Steps not proceeding to next step after clicking the submit button

javascript

vue.js

vuejs2

buefy

vuejs3