时间戳

首页 > 解决方案 > 清除函数中的 v-model 以使 v-tabs 不被突出显示 Vuetify

vue.js - 清除函数中的 v-model 以使 v-tabs 不被突出显示 Vuetify

问题描述

如果按下给定值，我有时想清除 v-model。

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

我在这里有一个工作示例：https ://codesandbox.io/embed/vuetify-clean-cfnoh?fontsize=14&hidenavigation=1&theme=dark

如果我只是将 this.active_tab 设置为空，则不会发生任何事情。我可以将它设置为一个整数，它会变成那个。有没有办法清除非要突出显示的项目的价值？

标签： vue.jsvuetify.js

解决方案

hide-slider在 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>

代码笔 - https://codesandbox.io/s/vuetify-clean-y53nu

推荐阅读