Запретить изменение V-вкладок V-вкладок - PullRequest
Новая
       32

Запретить изменение V-вкладок V-вкладок

0 голосов
/ 17 октября 2019

Есть ли способ предотвратить фактическое изменение v-вкладок при нажатии на них?

В моем случае мне сначала нужно проверить, изменился ли материал на странице, и отменить переключение на другую. вкладка, если она имеет.

Ни event.prevent, ни event.stop не остановят изменение 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>

TS: 

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..
        });
}

1 Ответ

2 голосов
/ 17 октября 2019

Вы должны следовать в вашем коде следующим образом. Вот пример, который поможет вам:

В файле 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)
    }
}

}

...