call child's computed method in VUE

Question

I got three VUE components with a structure like this: Table->Modal->Form. When user selects a record, the modal will be triggered and shown.

The Form component contains a computed method method1 for computing a property that is not stored by the database. I want to add a column in the Table component and display the return value of method1 for each record.

So something like this:

Vue.component('Form`, {
  computed: {
    method1: function() {
      // ...some calculations
      // No parameter cuz Form contains the selected record's data model
      return a_calculated_value
    }
  }
}

And I want to call method1 on each of the records in Table In addition, if possible I do not want to store this calculated value in the database. Is this possible?

Answer 1

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.