Блог

Главная - Вопросы по программированию - Проблемы Vuetify с элементом панели инструментов, который всегда активен

Проблемы Vuetify с элементом панели инструментов, который всегда активен

#javascript #vue.js #vuetify.js

#javascript #vue.js #vuetify.js

Вопрос:

Я использую панель инструментов Vuetify: у меня есть три v-tab (справа) и заголовок (слева), которые соответствуют домашней странице веб-сайта. Состояния v-tabs работают, когда я нажимаю на их компонент, но если я нажимаю на заголовок, чтобы вернуться домой, последний активный элемент v-tabs остается активным. На картинке ниже я на самом деле дома. введите описание изображения здесь

Я пытался добавить необязательное свойство, но оно не работает

Текущий код:

 <script>
import Searchbar from "./Searchbar.vue";

export default {
  name: "NavBar",
  components: { Searchbar },
  data() {
    return {
      appTitle: "ShowCase",
      drawer: false // Falso perchè è chiuso, quando si apre diventa vero
    };
  }
};
</script>

<style>
</style>  
 <template>
  <v-toolbar height="70" color="#252525" dark>
    <v-toolbar-title
      class="teal--text text--accent-3"
      style="cursor: pointer"
      @click="$router.push('/')"
      title="hover text"> 
       GameShelf 
      </v-toolbar-title>

    <v-spacer></v-spacer>
    <Searchbar/>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
    <v-tabs optional v-model="tab" fixed-tabs height="70" color="#252525" hover>
          <v-tab optional @click="$router.push('/Tuttiigiochi')"> All Games </v-tab> 
          <v-tab @click="$router.push('/Sceltidallaredazione')"> RetroGaming </v-tab>
          <v-tab  @click="$router.push('/Aboutus')"> About us</v-tab>
        </v-tabs>
      
   
    </v-toolbar-items>
  </v-toolbar>
</template>

Как я могу сделать элементы v-tabs неактивными, когда я вернусь домой?

Комментарии:

1. ваш фрагмент не работает

2. codesandbox.io/s/30082020-mt8ij?file=/src/components/NavBar.vue попробуйте эту ссылку codesandbox

3. @MariannaPascucci Я думаю, было бы лучше создать небольшой, но полностью воспроизводимый пример. Нет необходимости загружать весь проект целиком.

Ответ №1:

вы могли бы использовать функцию для перенаправления пользователя и ручного сброса вкладки в элементе заголовка вашей панели инструментов:

 @click="redirect"

В ваших методах:

 redirect() {
  this.tab = null
  this.$router.push('/')"
}

Вы также можете просмотреть маршрут и установить tab равным null, когда маршрут равен ‘/’ ;

 watch:{
    '$route' (to, from){
       if( to === '/') this.tab = null
    }
},