ag grid not retrieving data when mounted with vue using axios

Question

I have this strange case when trying to retrieve data from mongoDB using axios not showing on grid. It should be already successful given the data can already loaded into the view (already tested it), but it's nowhere inside beforeMount, mounted, or ready hook.

I already tried with

this.gridOptions.onGridReady = () => {
      this.gridOptions.api.setRowData(this.ticketData)
    }

but only yields partial success (unreliable), here's a code snippet to show what I mean,

<template>
  <div class="ticketing">        
    <ag-grid-vue  style="width: 100%; height: 350px;"
                  class="ag-fresh"
                  :gridOptions="gridOptions"
                  >
    </ag-grid-vue>
    {{testData}} <!--testData can be loaded-->
    <input type="button" @click.prevent="showData" value="test">  </div>
</template>

<script>
//import stuff

//header and url stuff

export default {
//component stuff

  data () {
    return {
      gridOptions: null,
      ticketData: [],
      testData: [] // only for testing purpose
    }
  },
  methods: {
     showData () {
      console.log('data shown')
      this.testData = this.ticketData // this is working
    }
  },
  beforeMount () { 
    var vm = this
    axios.get(ticketingAPIURL, {'headers': {'Authorization': authHeader}})
      .then(function (response) {
        vm.ticketData = response.data
      }) // this is working
      .catch(function (error) {
        console.log(error)
      })
    this.gridOptions = {}
    this.gridOptions.rowData = this.ticketData // this is not working
    this.gridOptions.columnDefs = DummyData.columnDefs
  }
 // mount, ready also not working
}
</script>

To be more specific, I still can't determine what really triggers onGridReady of ag-grid in conjunction with Vue component lifecycle, or in other words, how can I replace button to show testData above with reliable onGridReady/Vue component lifecycle event?

Answer 1

You define vm.ticketData and after you call it like this.ticketData You can change it by: this.rowData = vm.ticketData

Answer 2

You are setting this.gridOptions.rowData outside of the axios callback, so this.ticketData is still empty.

Set it inside the callback:

mounted() { 
  var vm = this
  axios.get(ticketingAPIURL, {'headers': {'Authorization': authHeader}})
    .then(function (response) {
      vm.ticketData = response.data
      vm.gridOptions = {}
      vm.gridOptions.rowData = vm.ticketData 
      vm.gridOptions.columnDefs = DummyData.columnDefs
    }) 
    .catch(function (error) {
      console.log(error)
    })
}

Answer 3

it is due to overlapped intialization between axios, ag-grid, and vue. after much tinkering, I am able to solve it with using Vue's watch function:

  watch: {
    isAxiosReady(val) {
      if (val) {
        this.mountGrid() // initiate gridOptions.api functions
      }
    }
  }