Topic: Vue Bootstrap 5 Tabs component ( MDBTabs )
Hi,
In Tabs component, before tab change i want to do some validation. if validation success i want to allow user pressed tab, if validation fails i want to restrict tab change. how to restrict that.
Component Name: Vue Bootstrap 5 Tabs component ( MDBTabs )
Hi. We do not have a method / event that would make it possible out of the box.
You can try to add pointer-events:none css property or pe-none class to the MDBTabItem component so that we can't click on the button
You can also create a watcher that would switch the tab back to where it was based on the validation result - there may be an animation flash visible. This can also create some kind of infinite loops so be careful of those.
watch(
() => activeTabId1.value,
(newValue, oldValue) => {
if (!validate(newValue)) {
nextTick(() => {
activeTabId1.value = oldValue; // revert to old tab if validation fails
});
}
}
);
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 4.1.1
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No