如何根据表单向导条件，vue-form-wizard 显示或隐藏选项卡内容？

问题描述

我正在使用以下库： https://binarcode.github.io/vue-form-wizard/#/

我基本上要做的是根据单选按钮的标记显示或隐藏选项卡内容，为此我正在尝试这种方式：

<tab-content v-if="form.company_referal == 'Yes'" title="Referal Form" icon="el-icon-info">
                <referralForm :form="form.referal_form" :errors="errors" :isdisabled="isdisabled" ref="referralForm"></referralForm>
</tab-content>

form.company_referal == 'yes' 为了能够显示它，此 company_referal 属性用于单选按钮，其值为“是”或“否”

但我遇到的问题是，当在 company_referal 的单选按钮中它是“是”时，它会将其添加到所有选项卡内容的末尾，但实际上它应该与“SnapShot”一起使用。

如果 form.company_referal 从 created 或 mounted 定义为“是”，它确实出现在 SnapShot 旁边，问题在于使用单选按钮进行更改时。

即使使用单选按钮，也应该如下所示：

解决方法

这里的关键是使用 watch 属性和 setTimeout。 setTimeout 很重要，否则推荐表单将始终出现在末尾（这是错误的顺序）。

@TabContent

<TabContent v-if="form.company_referal == 'Yes'" title="Accounting">
<TabContent v-if="renderQuote" title="Quote"">
<TabContent v-if="renderBindConfirmation" title="Bind Confirmation">

@数据

data() {
  renderQuote: true,renderBindConfirmation: true,},watch: {
    'form.company_referal': async function(newVal,old) {
      this.renderQuote = false
      this.renderBindConfirmation= false

      // fake delay before code execution
      await new Promise((resolve)=>setTimeout(() => {
          resolve();
      },0));

      this.renderQuote = true
      this.renderBindConfirmation = true
    },deep: true
  },

formwizard vue.js