I'm new to javascript and Vue, and I'm trying to figure out how to hide tabs that don't contain any information. I want to display only the tabs that do have information. Can someone please help me with this?
I automatically pull images based on naming conventions, and they should display under the correct tab if the file names match. However, not all bundles contain all sizes of images, so I want to show only the tabs that meet the criteria and hide the rest. This is also my first time asking a question here, so if I missed anything, please let me know. Thank you.
<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>