5👍
✅
Use a computed property for your headers:
<template>
<v-content>
<v-data-table
:headers="_headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
</v-data-table>
</v-content>
</template>
<script>
export default {
name: 'someTable',
computed: {
},
components: {
//
},
data: () => ({
test: true,
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
show: true
},
{ text: 'Calories', value: 'calories', show:true },
{ text: 'Fat (g)', value: 'fat', show:true },
{ text: 'Carbs (g)', value: 'carbs', show:false },
{ text: 'Protein (g)', value: 'protein', show:false }
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3
}
]
}),
computed : {
_headers () {
return this.headers.filter(x=>x.show)
}
}
};
</script>
Source:stackexchange.com