CODEWITHSUNDEEP
vue.jsvuetify.js
Maiken Madsen
Maiken Madsen

Reputation: 651

clear v-model in function for v-tabs not to be highlighted Vuetify

I want to clear the v-model sometimes if a given value is pressed.

<template>
  <div id="app">
    <v-app>
      <v-content>
        <v-tabs
          v-model="active_tab"
          slider-color="#F8940A"
          centered
          background-color="#ffffff"
          height="80px"
        >
          <v-tab v-for="(item, i) in items" :key="i" v-on:click="test()">
          <div>{{item.text}}</div>
        </v-tab>
      </v-tabs>
    </v-content>
  </v-app>
 </div>
</template>

<script>
export default {
name: "App",
data: () => ({
  items: [
   {
     text: "item 1"
   },
   {
     text: "item 2"
   },
   {
     text: "item 3"
   },
   {
     text: "item 4"
   }
  ],
  active_tab: ""
}),

methods: {
  test: function() {
    this.active_tab = "";
  }
 }
};
</script>

I have a working example here: https://codesandbox.io/embed/vuetify-clean-cfnoh?fontsize=14&hidenavigation=1&theme=dark

If I just set this.active_tab to empty nothing is happen. I'm able to set it to an integer and it will change to that. Is there a way to clear the value for non of the items to highlight?

Upvotes: 0

Views: 590

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 6978

Use hide-slider property on v-tabs.

<v-tabs
          v-model="active_tab"
          slider-color="#F8940A"
          centered
          background-color="#ffffff"
          height="80px"
          hide-slider

        >
          <v-tab v-for="(item, i) in items" :key="i" v-on:click="test()">
            <div>{{item.text}}</div>
          </v-tab>
        </v-tabs>

codepen - https://codesandbox.io/s/vuetify-clean-y53nu

Upvotes: 2

Related Questions