如果没有为vue中的特定选项卡显示任何内容，您如何隐藏或不显示选项卡？

Question

我是javascript和Vue的新手。我试图弄清楚如何“隐藏”不包含任何信息但只显示标签的标签。我不确定最好的办法。如果有人可以提供帮助，我会非常感激。

我根据命名自动提取图像。如果文件与此命名匹配，则显示在正确的选项卡下。我可以显示所有标签或不显示任何标签。并非所有的包都包含“所有大小”，因此我只想显示符合条件的选项卡，隐藏那些不匹配的选项卡。这也是我第一次在这里提交一些东西作为“提出问题”，所以如果我遗漏了什么，请告诉我。谢谢

<script>

export default {
    name: "Tab",
    data () {
        return {
          currentTab: 0,
          tabs: null,
          tabNames: [
            {title: 'tab one', size: 'one'},
            {title: 'tab two', size: 'two'},
            {title: 'tab three', size: 'three'},
            {title: 'tab four', size: 'four'},
            {title: 'tab five', size: 'five'},
            {title: 'tab 6', size: 'six'},
            {title: 'tab 7', size: 'seven'},
            {title: 'tab 8', size: 'eight'},
            {title: 'tab 9', size: 'nine'},
            {title: 'tab 10', size: 'ten'},
            {title: 'tab 11', size: '11'},
           ],
           show: false
        }
    },
    props: {
        files: {
          type: Array,
          default: () => []
        },
    },
    methods: {
      sizeImg(size) {
        const bundleRE = new RegExp()
      },
    }
}
</script>

<style lang="scss" scoped>       
  .thumbnail {
  display: inline-block;
  max-width: 100%; /* only this one important */
  margin-bottom: 0rem;
  margin-right: 1rem;
  border: 0;
  line-height: 0; }
</style>

<template>
  <div>
    <v-toolbar
      color="#212121"
      dark
      height="80"
      extension-height="110"
      tabs
    >
      <template v-slot:extension >
        <v-tabs
          v-model="tabs"
          color="#212121"
          grow
        >
        <v-tabs-slider color="#a60808"></v-tabs-slider>
          <v-tab 
            v-for="(tab, index) in tabNames"
            :key="index">
            {{ tab.title }} 
          </v-tab>
        </v-tabs>
      </template>
    </v-toolbar>
    <v-tabs-items v-model="tabs">
      <v-tab-item v-for="(tab, index) in tabNames" :key="index">
        <v-card flat>
          <v-container grid-list-md text-xs-center>
            <v-layout row wrap>
              <v-flex xs12>
                <v-card-text><img class="thumbnail" v-for="(i, n) in sizeImg(tab.size)" :key="n" :src='i'></v-card-text>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </div>
</template>

Answer 1

您可以创建一个计算的道具（例如，称为parsedTabs）并删除您不想显示的那些标签，例如：

parsedTabs() {
  return this.tabs.filter(tab => tab.size);
}