如何防止进入 vue-form-wizard 中的下一个选项卡？答案

【问题标题】：How to prevent to go to the next tab in vue-form-wizard?如何防止进入 vue-form-wizard 中的下一个选项卡？
【发布时间】：2020-01-21 10:55:16
【问题描述】：

我正在开发 vue 表单向导 (https://github.com/BinarCode/vue-form-wizard)，我想在跳到下一个选项卡之前进行手动验证。

问题是当我在 :before-change 中返回 false 时，它不起作用并返回错误。

<tab-content
  icon="fa fa-sign-in"
  title="Internal"
  v-if="purchases.purpose=='internal'"
  :before-change="()=>beforeTabSwitch(2)">
  ...

  <select class="custom-select mr-sm-2" id="inlineFormCustomSelect"
    v-model="purchases.internal.preferredShippingAddress">
    <option selected>Choose...</option>
    <option value="2">AU Forrestfield</option>
    <option value="3">BE Ghlin</option>
  </select>
  ....

  data() {
    return {
      stepIndex:0,
      formError: false,
      purchases: {
        purpose: 'internal',
        internal: {
          preferredShippingAddress: null,
        },
      },
      title: '',
      subtitle: ''
    }
  },
  ...

  beforeTabSwitch: function(s) {
    if (s === 2) {
      if (this.purchases.internal.preferredShippingAddress !== null) {
        return true;
      } else {
        /*
         *
         *
         * Here I want to stay in the same tab while the 
           value`this.purchases.internal.preferredShippingAddress`==null
         *
         *
         */
       }
     }
   }

【问题讨论】：

您介意重新格式化您的代码行吗？谢谢。
返回false应该是正确的方法。你得到什么样的错误？
嗨@MostafaAbdellaoui，如果回答了您的问题，我想鼓励您将答案标记为“已接受”。您可以在here 和here 看到如何以及为什么这样做。 :)

标签： javascript vue.js

【解决方案1】：

docs 说：

使用真值解析，将触发导航到下一步。用消息拒绝，将设置一个内部消息，如果需要可以处理和显示。

并且链接的JSFiddle演示了当你不想一步成功时，需要返回错误信息而不是false。

【讨论】：

【解决方案2】：

通过使用 vee-validate，您可以执行 @nextStep="validateStep"

然后

validateStep() {
 this.$refs.YOUR_OBSERVER_REF.validate().then((success) => {
   if (!success) {
    this.$refs.wizard.previousTab()
   }
 })
}

【讨论】：

您的答案可以通过添加有关代码的作用以及它如何帮助 OP 的更多信息来改进。