代码之家 › 专栏 › 技术社区 › thatOneGuy

如何在VueJS VueTify中通过单击选项卡本身以外的其他内容切换选项卡

vuetify.js vue.js javascript

thatOneGuy · 技术社区 · 7 年前

我有这个密码笔: https://codepen.io/anon/pen/KBNddq?&editors=101

我添加了一个星形按钮,所以当它点击时,你会得到一个警告。

我需要的是,当我单击星号时,我希望选项卡和选项卡视图都能更改。

有什么想法吗?

<div id="app">
  <v-app id="inspire">
    <div>
      <v-toolbar color="cyan" dark tabs>
        <v-toolbar-side-icon></v-toolbar-side-icon>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>search</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>more_vert</v-icon>
        </v-btn>

        <v-tabs slot="extension" v-model="model" centered color="cyan" slider-color="yellow">
          <v-tab v-for="i in 3" :key="i" :href="`#tab-${i}`">
            Item {{ i }}
          </v-tab>
        </v-tabs>
      </v-toolbar>

      <v-tabs-items v-model="model">
        <v-tab-item v-for="i in 3" :id="`tab-${i}`" :key="i">
          <v-card flat>
            <v-card-text v-text="text"></v-card-text>
            <v-btn @click.stop="changeTab" icon>
              <v-icon large color="blue">grade</v-icon>
            </v-btn>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </div>
  </v-app>
</div>

1 回复 | 直到 7 年前

akuiper 7 年前

你可以尝试这样的方法:

new Vue({
  el: '#app',
  data () {
    return {
      i: 0,            // set i to track the tab index
      model: 'tab-2',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
    }
  },
  methods: {
    changeTab(){
      //update the index and model
      this.i = (this.i + 1) % 3
      this.model = `tab-${this.i+1}`

      alert("Changing tab")
    }
  }
})

CodePen Example .

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

6 月前

Ben Foltz · 更新/删除递归子组件

7 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

7 月前

Felix · 更改vuetify v-field标签字体大小

7 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

7 月前

CentralDev · 如何导出和导入js文件?

11 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

11 月前

gespinha · 当元素不再可见时,如何更改ref元素?

1 年前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

1 年前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

1 年前