CODEWITHSUNDEEP
vue.jsvuejs2vue-componentaxiosag-grid
Ardhi
Ardhi

Reputation: 3035

ag grid not retrieving data when mounted with vue using axios

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?

Upvotes: 0

Views: 2106

Answers (3)

sarnei
sarnei

Reputation: 277

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

Upvotes: 1

Ardhi
Ardhi

Reputation: 3035

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
      }
    }
  }

Upvotes: 0

thanksd
thanksd

Reputation: 55644

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)
    })
}

Upvotes: 0

Related Questions