Question

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

我尝试在tab和0函数中将当前活动的标签null设置为reset()或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'];
},

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

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

动态加载/更改Vuetify标签

模板：

脚本：

1 个答案: