如何在Vue JS的main.js文件中获取golbal数据?

时间:2017-09-13 15:13:18

标签: javascript scope vue.js

以下代码来自我的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]

}
)




1 个答案:

答案 0 :(得分: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]
  });
});

另外,您可以使用Vue引用替换.graph,但是您没有发布模板,因此我不确定模板中.graph出现在哪里。如果继续使用$nextTick,您可能还需要在.graph中包装GraphChart的创建,在这种情况下代码将是

$.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]
    });
  });
});