Skip to content

Commit

Permalink
chore(QTabs): remove keys from ui/dev tabs example page to also catch…
Browse files Browse the repository at this point in the history 
… possible aggressive Vue diff in-place replacement
  • Loading branch information
@rstoenescu
rstoenescu committed Oct 5, 2022
1 parent dc03655 commit 952e7d8
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 35 deletions.
56 changes: 28 additions & 28 deletions ui/dev/src/pages/components/tabs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -327,38 +327,38 @@
<q-toggle v-model="useR1Q1Disabled" label="Insert r.1 q=1 loose & disabled" />
<q-tabs :dense="dense" class="test q-mt-sm" active-class="test-active-class" no-caps outside-arrows>
<q-tab label="Gigi" />
<q-route-tab key="01" v-if="loose" replace :to="{ name: 'r.1.1' }" label="r.1.1 *" />
<q-route-tab key="02" v-if="loose" replace :to="{ name: 'r' }" label="r *" />
<q-route-tab key="03" v-if="exact" replace :to="{ name: 'r' }" exact label="r" />
<q-route-tab key="04" v-if="loose && useR1Q1Disabled" replace :to="{ name: 'r.1', query: { q: '1' } }" label="r.1 q=1 * disabled" disable />
<q-route-tab key="05" v-if="loose" replace :to="{ name: 'r.1', query: { q: '1' } }" label="r.1 q=1 *" />
<q-route-tab key="06" v-if="exact" replace :to="{ name: 'r.1', query: { q: '1' } }" exact label="r.1 q=1" />
<q-route-tab key="07" v-if="exact && useR1" replace :to="{ name: 'r.1' }" exact label="r.1" />
<q-route-tab key="08" v-if="exact" replace :to="{ name: 'r.1.1' }" exact label="r.1.1" />
<q-route-tab key="09" v-if="loose" replace :to="{ name: 'r.2', query: { y: '1' } }" label="r.2 y=1 *" />
<q-route-tab key="10" v-if="loose" replace :to="{ name: 'r.1.4' }" label="r.1.4 => r.1.1 *" />
<q-route-tab key="11" v-if="loose" replace :to="{ name: 'r.1.4' }" label="r.1.4 => r.1.1" />
<q-route-tab key="12" v-if="loose" replace :to="{ name: 'r.1.2' }" label="r.1.2 *" />
<q-route-tab key="13" v-if="exact" replace :to="{ name: 'r.1.2' }" exact label="r.1.2" />
<q-route-tab key="14" v-if="loose" replace :to="{ name: 'r.1.3' }" label="r.1.3 => r *" />
<q-route-tab key="15" v-if="exact" replace :to="{ name: 'r.1.3' }" exact label="r.1.3 => r" />
<q-route-tab key="16" v-if="exact" replace :to="{ name: 'r.1.3' }" exact label="r.1.3 => r" />
<q-route-tab key="17" v-if="exact" replace to="/components/tabs/r/2#123456" exact label="r/2#123456" />
<q-route-tab key="18" v-if="exact" replace to="/components/tabs/r/2#123" exact label="r/2#123" />
<q-route-tab key="19" v-if="loose" replace :to="{ name: 'r.2' }" label="r.2 *" />
<q-route-tab key="20" v-if="exact" replace :to="{ name: 'r.2' }" exact label="r.2" />
<q-route-tab key="21" v-if="loose" replace :to="{ name: 'r.3' }" label="r.3 *" />
<q-route-tab key="22" v-if="exact" replace :to="{ name: 'r.3' }" exact label="r.3" />
<q-route-tab v-if="loose" replace :to="{ name: 'r.1.1' }" label="r.1.1 *" />
<q-route-tab v-if="loose" replace :to="{ name: 'r' }" label="r *" />
<q-route-tab v-if="exact" replace :to="{ name: 'r' }" exact label="r" />
<q-route-tab v-if="loose && useR1Q1Disabled" replace :to="{ name: 'r.1', query: { q: '1' } }" label="r.1 q=1 * disabled" disable />
<q-route-tab v-if="loose" replace :to="{ name: 'r.1', query: { q: '1' } }" label="r.1 q=1 *" />
<q-route-tab v-if="exact" replace :to="{ name: 'r.1', query: { q: '1' } }" exact label="r.1 q=1" />
<q-route-tab v-if="exact && useR1" replace :to="{ name: 'r.1' }" exact label="r.1" />
<q-route-tab v-if="exact" replace :to="{ name: 'r.1.1' }" exact label="r.1.1" />
<q-route-tab v-if="loose" replace :to="{ name: 'r.2', query: { y: '1' } }" label="r.2 y=1 *" />
<q-route-tab v-if="loose" replace :to="{ name: 'r.1.4' }" label="r.1.4 => r.1.1 *" />
<q-route-tab v-if="loose" replace :to="{ name: 'r.1.4' }" label="r.1.4 => r.1.1" />
<q-route-tab v-if="loose" replace :to="{ name: 'r.1.2' }" label="r.1.2 *" />
<q-route-tab v-if="exact" replace :to="{ name: 'r.1.2' }" exact label="r.1.2" />
<q-route-tab v-if="loose" replace :to="{ name: 'r.1.3' }" label="r.1.3 => r *" />
<q-route-tab v-if="exact" replace :to="{ name: 'r.1.3' }" exact label="r.1.3 => r" />
<q-route-tab v-if="exact" replace :to="{ name: 'r.1.3' }" exact label="r.1.3 => r" />
<q-route-tab v-if="exact" replace to="/components/tabs/r/2#123456" exact label="r/2#123456" />
<q-route-tab v-if="exact" replace to="/components/tabs/r/2#123" exact label="r/2#123" />
<q-route-tab v-if="loose" replace :to="{ name: 'r.2' }" label="r.2 *" />
<q-route-tab v-if="exact" replace :to="{ name: 'r.2' }" exact label="r.2" />
<q-route-tab v-if="loose" replace :to="{ name: 'r.3' }" label="r.3 *" />
<q-route-tab v-if="exact" replace :to="{ name: 'r.3' }" exact label="r.3" />
</q-tabs>

<div class="q-text-subtitle2">Custom click action</div>
<q-tabs :dense="dense" class="test q-mt-sm">
<q-route-tab key="1" replace :to="{ name: 'r.1' }" label="r.1 - delay 2sec" @click="routeNavDelay" />
<q-route-tab key="2" replace :to="{ name: 'r.1.1' }" label="r.1.1 disabled - delay 2sec" disable @click="routeNavDelay" />
<q-route-tab key="3" replace :to="{ name: 'r.2' }" label="r.2 - passthrough" @click="routeNavPass" />
<q-route-tab key="4" replace :to="{ name: 'r.2' }" label="r.2 - delay 2sec" @click="routeNavDelay" />
<q-route-tab key="5" replace :to="{ name: 'r.2' }" label="r.2 - cancel" @click="routeNavCancel" />
<q-route-tab key="6" replace :to="{ name: 'r.3' }" label="r.3 - redirect to r.1.1" @click="routeNavChange" />
<q-route-tab replace :to="{ name: 'r.1' }" label="r.1 - delay 2sec" @click="routeNavDelay" />
<q-route-tab replace :to="{ name: 'r.1.1' }" label="r.1.1 disabled - delay 2sec" disable @click="routeNavDelay" />
<q-route-tab replace :to="{ name: 'r.2' }" label="r.2 - passthrough" @click="routeNavPass" />
<q-route-tab replace :to="{ name: 'r.2' }" label="r.2 - delay 2sec" @click="routeNavDelay" />
<q-route-tab replace :to="{ name: 'r.2' }" label="r.2 - cancel" @click="routeNavCancel" />
<q-route-tab replace :to="{ name: 'r.3' }" label="r.3 - redirect to r.1.1" @click="routeNavChange" />
</q-tabs>

<h4>Href</h4>
Expand Down
7 changes: 0 additions & 7 deletions ui/src/components/tabs/QTabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -597,13 +597,6 @@ export default createComponent({
}
}

/*
* Vue has an aggressive diff (in-place replacement) so we cannot
* ensure that the instance getting destroyed is the actual tab
* reported here. As a result, we cannot use its name or check
* if it's a route one to make the necessary updates. We need to
* always check the existing list again and infer the changes.
*/
function unregisterTab (tabData) {
tabDataList.splice(tabDataList.indexOf(tabData), 1)
tabDataListLen.value--
Expand Down

0 comments on commit 952e7d8

Please sign in to comment.