当使用axios安装vue时，ag网格不检索数据

当尝试从未使用网格上显示的axios检索mongoDB中的数据时，我遇到了这种奇怪的情况。它应该给的数据已经可以加载到视图（已测试过）是已经成功，但它远不内部beforeMount，mounted，或ready挂钩。当使用axios安装vue时，ag网格不检索数据

我已经尝试过用

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

但只得到部分成功（不可靠），这里是一段代码，说明我的意思，

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

更具体地讲，我仍然可以“T确定真正触发AG-电网onGridReady连同Vue的组件生命周期，或者换句话说，我怎么能更换按钮，显示上述TESTDATA可靠onGridReady/Vue的组件生命周期事件？

来源

2017-09-02 Ardhi

您正在设置this.gridOptions.rowData以外的axios回调，因此this.ticketData仍为空。

将其设置在回调中：

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

来源

2017-09-05 22:28:14 thanksd

谢谢，但我已经尝试过，也和仍然没有工作。我已经发布了解决方案。 – Ardhi

是由于爱可信，AG-网格和VUE之间重叠intialization。很多修修补补之后，我能够使用Vue公司的手表功能来解决这个问题：

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

来源

2017-09-06 03:42:38 Ardhi

当使用axios安装vue时，ag网格不检索数据

回答

相关问题