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

Question

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

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

我制作了一个 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 后，当前事件的选项卡很奇怪。我基本上只想重新加载数据并将当前选项卡重置为第一个选项卡。

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

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

Answer 1

试试这个 -

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

并在您的重置功能中 -

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

而不是使用 item 作为键使用 i (索引)。

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