CODEWITHSUNDEEP
vue.jsformwizard
JG_GJ
JG_GJ

Reputation: 785

how to show or hide tab-content according to the form-wizard condition, vue-form-wizard?

I am using the following library: https://binarcode.github.io/vue-form-wizard/#/

What I basically have to do is show or hide a tab-content according to the marking of a radio button, for that I am trying this way:

<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' to be able to display it, this company_referal property is used in a radio button with the values ​​'Yes' or 'No'

But I have the problem that it adds it to the end of all the tab content when in the radio button of company_referal it is 'Yes', but in reality it should go along with 'SnapShot'. enter image description here

If form.company_referal is defined from created or mounted as 'Yes', it does appear alongside SnapShot, the problem is when making the change with the radio button.

This should look like this, even using the radio button:

enter image description here

Upvotes: 0

Views: 1373

Answers (1)

Creeptosis
Creeptosis

Reputation: 196

The key here is to use a watch property & setTimeout. the setTimeout is important otherwise referral form will always appear at the end (which is the wrong order).

@TabContent

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

@data

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
  },

Upvotes: 1

Related Questions