Vue JSのmain.jsファイルでゴルバデータを取得する方法は？

Question

次のコードは私の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] 
 

 
} 
 
)

Answer 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があなたのテンプレートに表示される場所、私はよく分かりません。 .graphを引き続き使用する場合は、$nextTickに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] 
    }); 
    }); 
});