title: How can you hide or not show tabs if nothing is displayed for that specific tab in vue?
body: <p>I am very new to javascript and Vue. I am trying to figure out how to 'hide' the tabs that do not contain any information but only showing the tabs that do. I am not sure of the best way to go about this. If anyone could help I would greatly appreciate it.</p>
  
  <p>I pull images automatically based on naming. If the files match this naming it then displays under the correct tab. I can either show all tabs or not show any. Not all of the bundles contain 'all of the sizes' so therefore I would like to just show the tabs that do match the criteria, hiding the ones that do not. This is also my first time ever submitting something through here as 'ask a question' so if I am missing anything please let me know. thx </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  
  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: () =&gt; []
          },
      },
      methods: {
        sizeImg(size) {
          const bundleRE = new RegExp()
        },
      }
  }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style lang="scss" scoped&gt;       
    .thumbnail {
    display: inline-block;
    max-width: 100%; /* only this one important */
    margin-bottom: 0rem;
    margin-right: 1rem;
    border: 0;
    line-height: 0; }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;v-toolbar
        color="#212121"
        dark
        height="80"
        extension-height="110"
        tabs
      &gt;
        &lt;template v-slot:extension &gt;
          &lt;v-tabs
            v-model="tabs"
            color="#212121"
            grow
          &gt;
          &lt;v-tabs-slider color="#a60808"&gt;&lt;/v-tabs-slider&gt;
            &lt;v-tab 
              v-for="(tab, index) in tabNames"
              :key="index"&gt;
              {{ tab.title }} 
            &lt;/v-tab&gt;
          &lt;/v-tabs&gt;
        &lt;/template&gt;
      &lt;/v-toolbar&gt;
      &lt;v-tabs-items v-model="tabs"&gt;
        &lt;v-tab-item v-for="(tab, index) in tabNames" :key="index"&gt;
          &lt;v-card flat&gt;
            &lt;v-container grid-list-md text-xs-center&gt;
              &lt;v-layout row wrap&gt;
                &lt;v-flex xs12&gt;
                  &lt;v-card-text&gt;&lt;img class="thumbnail" v-for="(i, n) in sizeImg(tab.size)" :key="n" :src='i'&gt;&lt;/v-card-text&gt;
                &lt;/v-flex&gt;
              &lt;/v-layout&gt;
            &lt;/v-container&gt;
          &lt;/v-card&gt;
        &lt;/v-tab-item&gt;
      &lt;/v-tabs-items&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>