Предотвратить Vuetify с V-вкладок с изменением
Есть ли способ предотвратить фактическое изменение v-вкладок при нажатии на них?
В моем случае мне сначала нужно проверить, изменился ли материал на странице, и я хочу отменить переход на другую вкладку, если он изменился.
Ни то, ни другое событие.предотвратить ни одно событие.стоп прекратить в вкладки от изменения:
<v-tab @click.prevent.stop="..."> ... </v-tab>
В данный момент я пользуюсь window.requestAnimationFrameдля сброса индекса вкладки к старому значению. Он делает свою работу, но мне кажется, что это очень неприятная техника.
HTML:
<v-tabs v-model="currentIndex">
<v-tab v-for="(route, index) in list" :key="index" @change="handleTabChange(route, $event)" >
{{ route.meta.title }}
</v-tab>
</v-tabs>
ТС:
public handleTabChange(routeConf:RouteConfig):void {
let currentIndex:number = this.currentIndex;
window.requestAnimationFrame(() => {
this.currentIndex = currentIndex;
Store.app.router.goto(routeConf.name, null, this.$route.params);
// Once the page actually changes this.currentIndex is set to the correct index..
});
}
Ответы - Предотвратить Vuetify с V-вкладок с изменением / Prevent Vuetify v-tabs from change
17.10.2019 10:15:06
Вы должны следовать этому пути в своем коде это пример который поможет вам:
В файле ts:
<template>
<v-tabs v-model="activeTab">
<v-tab v-for="tab in tabs" :key="tab.id" :to="tab.route">{{ tab.name }}
</v-tab>
<v-tabs-items v-model="activeTab" @change="updateRouter($event)">
<v-tab-item v-for="tab in tabs" :key="tab.id" :to="tab.route">
<router-view />
</v-tab-item>
</v-tabs-items>
</v-tabs>
</template>
Скрипт:
export default {
data: () => ({
activeTab: '',
tabs: [
{id: '1', name: 'Tab A', route: 'component-a'},
{id: '2', name: 'Tab B', route: 'component-b'}
]
}),
methods: {
updateRouter(val){
this.$router.push(val)
}
}
}
06.01.2020 01:33:52
Я решаю эту проблему с помощью отдельной переменной между v-tabsи v-tabs-items.
<v-tabs v-model="tab" @change="onTabChange">
<v-tab v-for="item in items" :key="item">
{{ item }}
</v-tab>
</v-tabs>
<v-tabs-items v-model="currentTab">
<v-tab-item v-for="item in items" :key="item">
<v-card>
<v-card-text>{{ item }}</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
methods: {
onTabChange() {
if (/* reject */) {
this.$nextTick(() => {
this.tab = this.currentTab
})
} else {
this.currentTab = this.tab
}
}
}