动态加载/更改 Vuetify 选项卡答案

【问题标题】：Dynamically loading/changing Vuetify Tabs动态加载/更改 Vuetify 选项卡
【发布时间】：2019-09-17 21:44:22
【问题描述】：

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

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

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

模板：

<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 后，当前活动的标签很奇怪。我基本上只是想重新加载数据并将当前选项卡重置为第一个。

我尝试在reset() 和more() 函数中将当前活动的标签tab 设置为0 或null。我也尝试在nextTick 中做同样的事情，但这也不起作用。

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

【问题讨论】：

功能正常，但内联样式导致问题。

标签： vue.js vuetify.js

【解决方案1】：

试试这个 -

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

在您的重置功能中 -

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

使用 i（索引）代替使用 item 作为键。

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

【讨论】：