Topic: Vue Bootstrap 5 Tabs component ( MDBTabs )

Linga premium asked 11 months 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 11 months 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
      });
    }
  }
);


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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