Vue.js 单击“检查”按钮一次并继续执行下一步后，禁用“检查”步骤中的“检查”按钮

我想禁用检查按钮后，它点击一次，并继续下一步。我尝试了其他一些方法，比如在方法中添加条件，但它不起作用。有人能指引我吗？多谢各位

这是我的密码：

完成
Lorem ipsum dolor sit amet。

检查

导出默认值{
名称：“应用程序”，
数据（）{
返回{
id:0，
提交：错误，
活动步骤：0，
showSocial:错，
是的，
是的，
isStepsClickable:错误，
哈斯：没错，
//自定义导航：false，
isProfileSuccess:false，
prevIcon：“左V形”，
nextIcon：“雪佛龙右翼”，
标签位置：“底部”，
mobileMode：“极简主义者”，
};
},
观察：{
活动步骤（步骤）{
这是真的；
设置超时（（）=>{
this.submiting=false；
}, 1500)
},
},
};
#应用程序{
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

您正在调用一个名为

next的方法。在按钮上执行操作

，不知道这是否是您正在扩展的另一个框架？@TechDev ok既然您使用的是buefy，您想什么时候禁用该按钮？在第三阶段？如果是这样，请更改提交到

：disabled=“activeStep===3”

我真的需要知道更多对不起，我刚刚假设你正在调用下一个方法。我已经更新了我的答案，不知道你为什么要这样做，但是：）所以我在

activeStep

中添加了一个手表，没有第2步，似乎是从第1步到第3步，是否要再次启用该按钮？如果不只是添加

：disabled=“activeStep==1”

或者只是用

v-show=“activeStep！==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>