Skip over a tab based on a flag value in either direction using Next or Previous buttons

[rhamedy]

Hi,

Thanks for developing this useful library.

I have the following code, which skips tab = 6 and jumps from tab = 5 to tab = 7 when I press Next button

tab5BeforeChange: function() {
     this.$refs.wizard.changeTab(0,7); 
      return true; 
}

However, the same does not work when Previous button is used to return from tab = 7 to 6.

What I trying to do is basically skip over a tab based on a flag. I want the skipping to happen regardless of which direction I am navigating (i.e. left using Previous button or right using Next button).

Maybe, making use of before-change event is not best for this use case. I wanted to make use of on-change but, this this.$refs.wizard.changeTab(0,7); does not work in on-change method callback. Not sure why.

I tried making use of v-if and v-show but, that causes an unexpected behaviour. If the condition validates to true then tab shown at the end of the tabs (i.e. as if appended).

The use case is as follow

1. Tab 5 has a check-box on whether a client has a representative, if TRUE then details are representative is collected.
2. Tab 6 is purely about Representative's address and contact details however, if the condition is FALSE in tab = 5 then I want to skip over this tab (or not show it at all - I don't know if dynamically adding/remove tabs in index position is easier).

Any idea how to achieve this?

Update
I also noticed that when you change tab from tab = 5 to tab = 7 (7 being the final tab) then it automatically trigger the on-complete event before you get a chance to press the Finish button. Is that the default behaviour or a premature event that should not be fired which switching tabs?

[rhamedy]

I did a workaround fix to get this working.

I first tried to make use of event bus by emitting my-custom-event from vue-form-wizard's on-change(prev,next) and then catch that and accordingly check the prev or next values and accordingly do a this.$refs.wizard.changeTab(0,x); in mounted() or created() but, this.$refs.wizard turned out to be undefined and after a little google search, seems like this.$refs. in mounted() and created() is more controversial so I abandoned the event bus idea even though it did feel the better approach.

I fall back to watch in order to keep an eye on this.tabChanged property and upon change, check the prev and next values to find out whether to jump to right of tab=6 or left of it. Here is the sample piece of code that skips tab = 6.

watch: {
      'tabChanged': function() {
        if(this.prevTab == 5 && this.nextTab == 6 && !this.showTab6)
          this.$refs.wizard.changeTab(0,7);
        else if(this.prevTab == 7 && this.nextTab == 6 && !this.showTab6)
          this.$refs.wizard.changeTab(0,5);
      }
    },

onChange: function(prev,next) {
        this.tabChanged = !this.tabChanged; //This makes me feel so dumb! :(
        this.nextTab = next;
        this.prevTab = prev;
}

For now I will stick with this ugly workaround but, ideally I would like to achieve the same functionality as above using event bus maybe (if there is no way to do it using built-in methods and functionalities) and it would be much cleaner and for that I will have to figure out how to access this.$refs.wizard.changeTab... where wizard is undefined.