Topic: Vue Bootstrap 5 Tabs component ( MDBTabs )
                  
                  Linga
                  premium
                  asked 1 year ago
                
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 )
                      
                      Bartosz Cylwik
                      staff
                        answered 1 year ago
                    
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
- ForumUser: Premium
 - 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