以下代码来 self 的 main.js 文件。在这里,我使用 Vue 对象从 url 解析数据,它返回一些数据数组。现在,在 main.js 文件中我有另一个 GraphChart 对象,这里我需要来自 tableData 的一些数据。
这怎么可能?或任何其他技巧? 现在我一无所获。
var tableData = new Vue({
data: {
items: ''
},
methods: {
graphData: function () {
var self = this;
var testdata= '';
$.get( 'http://localhost:3000/db', function( data ) {
self.items = data;
});
},
},
created: function() {
this.graphData();
},
computed:{
});
new GraphChart('.graph', {
stroke: {
width: 24,
gap: 14
},
animation: {
duration: -1,
delay: -1
},
// series: needs data from ITEMS object
series:items._data.radialChart[1]
}
)
最佳答案
首先,如果您将图表的创建留在原处,您将能够使用 tableData.items
获取数据。不过,我预计这可能会有问题,因为数据是异步检索的,这意味着图表将在返回数据之前创建。
看起来您需要将创建图表的代码移动到获取数据的回调中。
$.get("http://localhost:3000/db", function(data) {
self.items = data;
new GraphChart(".graph", {
stroke: {
width: 24,
gap: 14
},
animation: {
duration: -1,
delay: -1
},
series: self.items._data.radialChart[1]
});
});
此外,您可以将 .graph
替换为 Vue 引用,但您没有发布模板,所以我不确定 .graph
出现在您的何处模板。如果您继续使用 .graph
,您可能还需要将 GraphChart 的创建包装在 $nextTick
中,在这种情况下,代码将是
$.get("http://localhost:3000/db", function(data) {
self.items = data;
self.$nextTick(() => {
new GraphChart(".graph", {
stroke: {
width: 24,
gap: 14
},
animation: {
duration: -1,
delay: -1
},
series: self.items._data.radialChart[1]
});
});
});
关于javascript - 如何在 Vue JS 中获取 main.js 文件中的全局数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46201108/