I have a component that displays a table on various pages. Within this table, there is a button to create goals. However, I want to control when this button appears on certain pages and exclude it from others. Below is the code for the table component and an example of a page where I do not want the button to be displayed.
employeePage
<template>
<v-card class="mx-auto overflow-hidden" height="900" width="1800">
<div class="content">
<MetasTableComponent
:title="'Global Goal'"
:headers="headers"
:items="globalGoals"
:loading="loadingGobalGoals"
/>
<MetasTableComponent
:title="'Sectorial Goals'"
:headers="headers"
:items="sectorialGoals"
:loading="loadingMetasSetoriais"
/>
<MetasTableComponent
:title="'Individual Goals'"
:headers="headers"
:items="individualGoals"
:loading="loadingMetasIndividuais"
@save-data="createIndividualGoal"
/>
</div>
</v-card>
</template>
<script>
import {
findGlobalGoals,
findSectorialGoals,
findIndividualGoals,
createIndividualGoal,
} from "...";
import MetasTableComponent from "...";
export default {
name: "IndividualViewPage",
components: {
MetasTableComponent,
},
data: function () {
return {
drawer: false,
group: null,
headers: [
{
text: "Name",
value: "GoalName",
align: "left",
width: 50,
caption: "title",
},
{
text: "Min",
value: "Min",
align: "left",
width: 50,
caption: "title",
},
{
text: "Target",
value: "Target",
align: "left",
width: 50,
caption: "title",
},
{
...
Table component
<template>
<div id="table">
<v-card class="mx-auto mb-3">
<v-app-bar dark color="green">
<v-toolbar-title>{{ title }}</v-toolbar-title>
</v-app-bar>
<v-data-table
dense
:headers="headers"
:items="items"
item-key="name"
class="elevation-1"
:loading="loading"
loading-text="Loading..."
no-data-text="No record found."
:items-per-page="20"
:footer-props="{
itemsPerPageText: 'Items per page',
itemsPerPageAllText: 'All',
}"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-row dense>
<v-col cols="1">
<v-btn
class="mx-5 mt-2"
fab
x-small
dark
color="green"
@click="createData()" //This button creates goals
>
<v-icon dark>mdi-plus</v-icon>
</v-btn>
</v-col>
</v-row>
</v-toolbar>
</template>
<template v-slot:[`item.actions`]="{ item }">
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-icon
small
class="ml-1"
@click="readData(item)"
v-bind="attrs"
v-on="on"
>mdi-eye</v-icon
>
</template>
<span>View</span>
</v-tooltip>
...