单击检查按钮一次并继续下一步后，禁用 Buefy Steps 中的检查按钮

Question

我想在单击一次并继续下一步后禁用复选按钮。我尝试了一些其他方法，比如在方法中添加条件，但它不起作用。谁能指导我？谢谢。

这是我的代码：

https://codesandbox.io/s/angry-rosalind-c2dxd?file=/src/App.vue

Answer 1

<template>
  <div id="app">
    <section>
      <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="Today" :clickable="isStepsClickable">
        </b-step-item>

        <b-step-item
          step="2"
          label="Day 2"
          :clickable="isStepsClickable"
          :type="{ 'is-success': isProfileSuccess }"
        >
        </b-step-item>

        <b-step-item
          step="3"
          :visible="showSocial"
          label="Day 3"
          :clickable="isStepsClickable"
        >
        </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 slot="navigation" slot-scope="{ previous, next }">
          <div class="field is-grouped is-grouped-centered">
            <p class="control">
              <button
                :disabled="submitting"
                class="button is-primary"
                @click.prevent="next.action"
              >
                Check
              </button>
            </p>
          </div>
        </template>
      </b-steps>
    </section>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      id: 0,
      submitting: false,
      activeStep: 0,

      showSocial: false,
      isAnimated: true,
      isRounded: true,
      isStepsClickable: false,

      hasNavigation: true,
      // customNavigation: false,
      isProfileSuccess: false,

      prevIcon: "chevron-left",
      nextIcon: "chevron-right",
      labelPosition: "bottom",
      mobileMode: "minimalist",
    };
  },
  watch: {
    activeStep(step) {
      this.submitting = true;
      setTimeout(() => {
        this.submitting = false;
      }, 1500)
    },
  },
};
</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>

单击检查按钮一次并继续下一步后，禁用 Buefy Steps 中的检查按钮

Disable Check Button in Buefy Steps after clicking the check button once and proceeding to next step

vue.js

vuejs2

buefy