Предотвратить Vuetify с V-вкладок с изменением

Предотвратить Vuetify с V-вкладок с изменением

17.10.2019 09:57:18 Просмотров 39 Источник

Есть ли способ предотвратить фактическое изменение 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..
        });
}
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/58426607/prevent-vuetify-v-tabs-from-change#comment103195240_58426607
Вместо того, чтобы использовать click.предотвращать.остановить использование нажмите кнопку.остановить.предотвращать
https://stackoverflow.com/questions/58426607/prevent-vuetify-v-tabs-from-change#comment103195479_58426607
@chans, который все еще не останавливает V-tabs от изменения

Ответы - Предотвратить Vuetify с V-вкладок с изменением / Prevent Vuetify v-tabs from change

smita

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

}

https://stackoverflow.com/questions/58426607/prevent-vuetify-v-tabs-from-change/58426898#comment103195628_58426898
Я не вижу, как это останавливает изменение вкладок. Кроме того, я не использую v-tabs-items; просто сама панель вкладок.
User 28

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
    }
  }
}

Демонстрация

Закрыть X