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

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

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

我制作了一个代码笔，我认为它显示了基本问题：

模板： 更改选项卡列表<代码>项目后，当前活动的选项卡会出现异常。我基本上只想重新加载数据并将当前选项卡重置为第一个选项卡

我已尝试在

reset（）

和

more（）

函数中将当前活动的选项卡

tab

设置为

0

或

null

。我也尝试在

nextTick

中执行同样的操作，但这也没有真正起作用

感觉Vuetify选项卡需要一段时间来重新加载数据，并且在数据加载完成时缺少某种事件（或者我不知道如何等待）。或者我只是误用了标签，有一个更容易用的东西可以作为可重新加载、可切换的物品列表。

试试这个-

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

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

---

链接到pen-

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

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'
      ];
    }
  }
})

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

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