时间戳

首页 > 解决方案 > 动态加载/更改 Vuetify 选项卡

vue.js - 动态加载/更改 Vuetify 选项卡

问题描述

我正在尝试使用 Vuetify 选项卡来显示我的项目。我正在使用选项卡来显示用户可以批准或不批准的项目的可滑动列表。批准后从列表中删除该项目。

不过，我遇到了动态更新选项卡列表的问题。

我制作了一个我认为显示基本问题的 Codepen：

https://codepen.io/hdoddema/pen/yrrBGQ

模板：

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

        <template v-slot:extension>
          <v-tabs
            v-model="tab"
            color="cyan"
            align-with-title
          >
            <v-tabs-slider color="yellow"></v-tabs-slider>

            <v-tab v-for="item in items" :key="item">
              {{ item }}
            </v-tab>
          </v-tabs>
        </template>
      </v-toolbar>

      <v-tabs-items v-model="tab">
        <v-tab-item v-for="item in items" :key="item">
          <v-card flat>
            <v-card-text>{{ text }}</v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </div>
    <v-btn @click="reset">Less</v-btn>
    <v-btn @click="more">More</v-btn>
    <pre>{{ tab }}</pre>
  </v-app>
</div>

脚本：

new Vue({
  el: '#app',
  data () {
    return {
      tab: null,
      items: [
        'web', 'shopping', 'videos', 'images', 'news'
      ],
      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: {
    reset() {
      this.items = ['one new tab'];
    },
    more() {
      this.items =[
        'web', 'shopping', 'videos', 'images', 'news'
      ];
    }
  }
})

更改选项卡列表后items，当前活动的选项卡很奇怪。我基本上只想重新加载数据并将当前选项卡重置为第一个。

我尝试将当前活动的选项卡设置为tab和0功能。我也尝试在 a 中做同样的事情，但这也不起作用。nullreset()more()nextTick

感觉 Vuetify Tabs 需要一段时间来重新加载数据，并且在完成时缺少某种事件（或者我只是不知道如何等待）。或者，也许我只是误用了 Tabs，并且有一些更容易用作可重新加载、可滑动的事物列表的东西。

标签： vue.jsvuetify.js

解决方案

试试这个 -

<v-tab v-for="(item, i) in items" :key="i">

并在您的重置功能中- 

reset() {
  this.tab = null; // add this new line
  this.items = ['one new tab'];
},

而不是使用项目作为键使用i（索引）。

链接到笔 - https://codepen.io/anon/pen/rbbNEW?editors=1010

推荐阅读