Show confirmation dialog before changing Quasar q-tab

I'm using Quasar's q-tabs, and I want to prevent tab switching when clicking on other q-tabs until a custom popup is displayed, and after confirmation in the popup, the tab switch should continue rendering. I've searched the official documentation, but I haven't found a suitable solution. Is there a way to meet my requirements?

The issue now is that the tabs switch when you click on them. Even though I've triggered the blocking popup, the data has already been rendered.

I apologize for any confusion caused. English is not my primary language. If you have any questions, please let me know.

Best regards.

If you listen for the @update:model-value event on the <q-tabs> element, it will not automatically assign a new value to it's model because now you control what happens when the event occurs. You'll also need to use :model-value prop for 1-way binding rather than v-model's 2-way binding.

<q-tabs
  @update:model-value="verifyTab"
  :model-value="currentTab"
>

Using a method you can respond to the event by:

1. Remembering what tab was just clicked so you can decide later whether to actually switch to it.
2. Open the popup dialog

const dialog = ref(false)
const currentTab = ref('initialTab')
const clickedTab = ref()

function verifyTab(tab) {
  clickedTab.value = tab // remember which tab is clicked
  dialog.value = true // open dialog
}

The dialog can then set the tab based on the user's interaction.

<q-dialog v-model="dialog">
  ...
  <q-btn label="OK" @click="currentTab = clickedTab" v-close-popup />
</q-dialog>
  

jsfiddle example