How to always enable the click event on nav pills? about vue-form-wizard HOT 7 CLOSED

Yes @theKhorshed that can be an option. Another more generic option would be this one

var tabs = this.$refs.wizard.tabs;
tabs.forEach((tab)=>tab.checked = true)
this.$refs.wizard.maxStep = tabs.length;

https://jsfiddle.net/bt5dhqtf/1278/

from vue-form-wizard.

I think this should not be part of a wizard... If you need that, then you should use normal tab control... see the vue-tabs from @cristijora ... A wizard, in my opinion,should guide you forward, step by step.
I mean, if @cristijora is implementing this, then it'll need to be configurable... because for my use case it would be actually wrong if the user can click any the step.

from vue-form-wizard.

@pimboden thanks for the answer. I wanted to write the same thing.
Although I agree with this, maybe there are use cases where you want to show a wizard for informational purposes.
This behavior @theKhorshed can be achieved with scoped slots and some custom logic but I wouldnt include it as a prop/option in the wizard as its not a default expected behavior as @pimboden said

from vue-form-wizard.

Thanks for your reply and you guys are right.

Actually, I need this the default wizard behavior when a user submits the form for the first time and also the tab like behavior when the users come back to edit the form later.

I'm doing this right now via the following code on mount

this.$refs.wizard.changeTab(0, 3)
this.$refs.wizard.changeTab(3, 0)

Let me know if there is any better approach. Also I think a prop/option would be a nice addition to the component.

from vue-form-wizard.

Thanks a lot @cristijora

from vue-form-wizard.

Yes @theKhorshed that can be an option. Another more generic option would be this one

var tabs = this.$refs.wizard.tabs;
tabs.forEach((tab)=>tab.checked = true)
this.$refs.wizard.maxStep = tabs.length;

https://jsfiddle.net/bt5dhqtf/1278/

greats!...

from vue-form-wizard.

on documentation we can do like these

this.$refs.wizardFirst.activateAll()

from vue-form-wizard.