La grille AG ne récupère pas les données lorsqu'elle est montée avec vue en utilisant les axios

Question

J'ai ce cas étrange lorsque j'essaie de récupérer des données de mongoDB en utilisant des axios qui n'apparaissent pas sur la grille. Il devrait être déjà réussi étant donné que les données peuvent déjà être chargées dans la vue (déjà testé), mais il n'est nulle part à l'intérieur beforeMount, mounted, ou ready.

Je l'ai déjà essayé avec

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

mais les rendements qu'un succès partiel (non fiable), est ici un extrait de code pour montrer ce que je veux dire,

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

Pour être plus précis, je peux encore Ne déterminez pas ce qui déclenche réellement la fonction GridReady de l'aggrille en conjonction avec le cycle de vie du composant Vue, ou en d'autres termes, comment remplacer Button pour afficher testData ci-dessus avec un événement de cycle de vie fiable du composant onGridReady/Vue?

Answer 1

Vous définissez this.gridOptions.rowData en dehors du rappel axios, donc this.ticketData est toujours vide.

Set à l'intérieur de la fonction de rappel:

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 2

elle est due à chevauchement entre Axios initialisation, grille-ag, et vue. après beaucoup de bricoler, je suis en mesure de le résoudre avec l'aide de la fonction de la montre de Vue:

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