Trigger tab change from step?
Closed this issue · 1 comments
andrefigueira commented
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 commented
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">