[Vuejs]-Call child's computed method in VUE

by

0👍

look at my example maybe it can help

<template>
    <marker-table
      ref="dt"
      v-model="showTable"
      :raw-table-data="tableData"
    />
    <v-btn @click="showGasTable">
    Show GAS Table
    </v-btn>
    <v-btn @click="shoeElecTable">
    Show Electricity Table
    </v-btn>
</template>


<script>
  import markerTable from './components/markerTable.vue'
  methods:{
    showGasTable () {
      this.tableData = this.gas
      this.$refs.dt.popHeaders('gas')
    },
    showElecTable () {
      this.tableData = this.elec
      this.$refs.dt.popHeaders('electricity')
    },

 }
</script>

Component markerTable.vue

<template>
    <v-data-table 
      :headers="headers"
      :items="tableData"
     >
     </v-data-table>
</template>

<script>
export default { // eslint-disable-next-line
  props: ['rawTableData'],
  data () {
    return {
      headers: [],
      title: '',
      rawData: '',
      tableData: ''
    }
  },
  computed: {
    dataUpdate () {
      this.rawData = this.rawTableData
      return this.rawData
    }
  },


 methods: {
    popHeaders (value) {
      if (value === 'gas') {
        this.headers =
         [{ text: 'Volume', value: 'Vm' },
           { text: 'Day', value: 'day' }]
        this.title = 'GAS Supply'
      } else if (value === 'electricity') {
        this.headers =
         [{ text: 'Units', value: 'units' },
           { text: 'Watts', value: 'watt' },
           { text: 'Time', value: 'time' }]
        this.title = 'Electric Supply'
      }
}
}

You can access the method popHeader from the child component with sets of data and can process them in your child and it will be returned to your main page.

Leave a comment