Home > front end >  Vue hide a table's component button on a specific page
Vue hide a table's component button on a specific page

Time:07-23

I have a table as a component that loads on some pages. In the table there is a button to create goals. But as I use this table on different pages, there are pages that I don't want this add goals button to be loaded, but on other pages this button will be loaded. Below I'm putting the table component and a page that I wouldn't want to load that button on it.

employeePage

<template>
  <v-card  height="900" width="1800">
    <div >
      <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",
        },
        {
          text: "Max",
          value: "Max",
          align: "left",
          width: 50,
          caption: "title",
        },
        {
          text: "Result",
          value: "Result",
          align: "left",
          width: 50,
          caption: "title",
        },
        {
          text: "Actions",
          value: "actions",
          align: "left",
          width: 40,
          caption: "title",
        },
      ],
      globalGoals: [],
      sectorialGoals: [],
      individualGoals: [],
      loadGlobalGoals: false,
      loadSectorialGoals: false,
      loadingIndividualGoals: false,
    };
  },
  methods: {
    async createIndividualGoal(data) {
      [...]
    },
    async loadGlobalGoals() {
      [...]
    },
    async loadSectorialGoals() {
      [...]
    },
    async loadIndividualGoals() {
      [...]
    },
  },
  mounted() {
    this.loadGlobalGoals();
    this.loadSectorialGoals();
    this.loadIndividualGoals();
  },
};
</script>

Table component

<template>
  <div id="table">
    <v-card >
      <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"
        
        :loading="loading"
        loading-text="Loading..."
        no-data-text="No record found."
        :items-per-page="20"
        :footer-props="{
          itemsPerPageText: 'Items por page',
          itemsPerPageAllText: 'All',
        }"
      >
        <template v-slot:top>
          <v-toolbar flat color="white">
            <v-row dense>
              <v-col cols="1">
                <v-btn
                  
                  fab
                  x-small
                  dark
                  color="green"
                  @click="createData()" //This is the button that add goal
                >
                  <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
                
                @click="readData(item)"
                v-bind="attrs"
                v-on="on"
                >mdi-eye</v-icon
              >
            </template>
            <span>View</span>
          </v-tooltip>

          <v-tooltip right>
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                small
                
                @click="updateData(item)"
                v-bind="attrs"
                v-on="on"
                >mdi-pencil</v-icon
              >
            </template>
            <span>Editar</span>
          </v-tooltip>

          <v-tooltip right>
            <template v-slot:activator="{ on, attrs }">
              <v-icon
                small
                
                @click="deleteData(item)"
                v-bind="attrs"
                v-on="on"
                >mdi-delete</v-icon
              >
            </template>
            <span>Delete</span>
          </v-tooltip>
        </template>
      </v-data-table>
    </v-card>

    <v-dialog v-model="formDialog">
    <v-card ref="form">
      <v-card-title >
        {{ formDialogTitle }}
      </v-card-title>

      <v-card-text>
        <v-row dense >
          <v-col cols="4">
            <v-text-field
              v-model="itemData.GoalName"
              label="Name"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"
            ></v-text-field>
          </v-col>

          <v-col cols="2">
            <v-text-field
              v-model="itemData.Min"
              label="Min"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"
            ></v-text-field>
          </v-col>

          <v-col cols="2">
            <v-text-field
              v-model="itemData.Max"
              label="Max"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"
            ></v-text-field>
          </v-col>

          <v-col cols="2">
            <v-text-field
              v-model="itemData.Target"
              label="Target"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"
            ></v-text-field>
          </v-col>

          <v-col cols="2">
            <v-text-field
              v-model="itemData.Result"
              label="Result"
              dense
              counter="150"
              maxlength="150"
              :readonly="isReading"
            ></v-text-field>
          </v-col>

        </v-row>
      </v-card-text>

      <v-card-actions>
        <v-btn color="red" dark small @click="formDialog = false">
          Close
        </v-btn>

        <v-spacer></v-spacer>
        <v-btn small color="primary" v-if="!isReading" @click="saveData()"
          >Save
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  </div>
</template>

<script>
import {

} from "../services/goals-service/crud-goals-service";

export default {
  props: {
    title: { type: String },
    headers: { type: Array },
    items: { type: Array },
    loading: { type: Boolean },
    functionCallback: { type: Function },
  },
  data: () => {
    return {
      formDialog: false,
      formDialogTitle: "",
      itemData: {},
      isCreating: false,
      isReading: false,
      isUpdating: false,
      isDeleting: false,
    };
  },
  methods: {   
    createData() {
      this.itemData = {};
      this.formDialogTitle = `${this.title}: New Goal`;
      this.isCreating = true;
      this.isReading = false;
      this.isUpdating = false;
      this.isDeleting = false;
      this.formDialog = true;
    },
    readData(item) {
      this.itemData = item;
      this.formDialogTitle = `${this.title}: ${item.GoalName}`;
      this.formDialog = true;
      this.isReading = true;
      this.isCreating = false;
      this.isUpdating = false;
      this.isDeleting = false;
    },
    updateData(item) {
      console.log('updateData', item);
    },
    deleteData(item) {
      console.log('deleteData', item);
    },
    async saveData() {
      this.$emit('save-data', this.itemData);
  }
  }
};
</script>

CodePudding user response:

Create one more Props in Table component called "EnableGoalAction" boolean value

pass this value true/false from your component implemented page based on your need.

you need check if condition in your button like below

     <v-btn
              
              fab
              x-small
              dark
              color="green"
             v-if="EnableGoalAction"
              @click="createData()" //This is the button that add goal
            >
              <v-icon dark>mdi-plus</v-icon>
            </v-btn>
  • Related