Trigger tab change from step?

[andrefigueira]

Hi there,

I'm building a form where I need to set a value with a button on screen, but instead of having a user press continue, i'd like to move to the next tab with the option they select.

For example, this is my template:

<template>
    <div>
        <h3 class="heading text-center mb-5">
            Are you {{ name }}’s legal guardian?

            <div class="row">
                <div class="col-md-6">
                    <button class="btn btn-theme w-80" @click="setGuardian('no')">No</button>
                </div>
                <div class="col-md-6">
                    <button class="btn btn-theme w-80" @click="setGuardian('yes')">Yes</button>
                </div>
            </div>
        </h3>
    </div>
</template>

I'd like to trigger nextTab() from my setGuardian method, does anyone know how I can do this, I can't seem to find how via the docs.

Thank you.

[andrefigueira]

I've found I can do this using events;

In my tab-content I have the following method:

setGuardian(value) {
    this.guardian = value;

    bus.$emit('next-tab', {
        guardian: this.guardian
    });
}

And in my wizard I have a listener on the mounted method:

bus.$on('next-tab', response => {
    this.mergePartialModels(response, true);
    this.$refs.wizard.nextTab();
});

I also had to set a ref for the wizard to be able to call the nextTab method.

<form-wizard @on-change="isFirstStep = false" ref="wizard">