QTabs ignores intended data-flow of v-model

[renekaesler]

Describe the bug When setting :model-value & @update:model-value explicitly, then model-value is updated, even if the updating method does not change the model.

This is a problem, when you want to interrupt tab switches based on a condition (e.g. an invalid form inside of the active tab panel)

Codepen/jsFiddle/Codesandbox (required) https://codepen.io/pacman-rene-kaesler/pen/zYNXrpJ?editors=1010

To Reproduce Steps to reproduce the behavior:

1. Click on an tab that is different from mails

Expected behavior Only if the event handler changes the model, the tab should switch.

Platform (please complete the following information): Quasar Version: @quasar/app Version: Quasar mode:

• [X] SPA
• [ ] SSR
• [ ] PWA
• [ ] Electron
• [ ] Cordova
• [ ] Capacitor
• [ ] BEX

Tested on:

• [X] SPA
• [ ] SSR
• [ ] PWA
• [ ] Electron
• [ ] Cordova
• [ ] Capacitor
• [ ] BEX

OS: Ubuntu 20.04 Node: v14.15.0 NPM:6.14.8 Browsers: Google Chrome

[hawkeye64]

@renekaesler I think you are wanting to use the keep-alive property https://next.quasar.dev/vue-components/tab-panels#usage

[metalsadman]

looks like a bug to me, model should not change, as :model-value @update:model-value, should behave like the old :value @input. https://codepen.io/metalsadman/pen/VwPOmPL?editors=101

[renekaesler]

@hawkeye64 No, I is not about the keep-alive property. The codepen of @metalsadman is a good example for conditions in the update handler (thanks for the pen 👍🏼 ).

Actually QTabs mirrors the :model-value in its own state (currentModel). I do not exactly know, why the model has been mirrored, but because of that you have to keep :model-value & currentModel in sync. You can find this logic inside the updateModel method. But this logic is only executed, if the onUpdate:modelValue has been set.

For me that does not seems to be right, because the logic assumes v-model has been set, when model-value & update:model-value is available in the props... This results in unexpected behaviors:

• :model-value has been set: click on other tabs does not trigger a switch animation
• :model-value & update:model-value (with empty handler) has been set: click on other tabs does trigger a switch animation

I think the problem lies in copying the :model-value into the components state. In most cases it is considered as an anti-pattern.

[jparish3]

what is the status of this open issue; seems fundamental to the component