2017-09-01 19 views
0

vueとaxiosを使用してcytoscapeグラフをロードしようとしています。とにかく私は腋生とvueだけで最初に試したので、構成することができません。スコープにはまだ問題がありますが、私はどこを把握できませんか?私は何を変えるべきですか? vueとaxiosを正しく設定する方法。Axiosがvueにデータをロードしていません

EDIT

のでthis.nodesを設定した後、私はcytoscape.jsでgrapgを描画したいと思いますが、私は常にエラーを取得:

-Theスタイルプロパティtext-outline-color:が無効

です - 対応するデータのない要素にはマッピングを割り当てないでください(たとえば、text-outline-colorのプロパティ6b899f09-359e-424d-9461-d71c8c3fcd3bのデータフィールドfaveColorの場合)。 faveColor定義さ

-UncaughtはTypeErrorを持つ要素に範囲を限定する[faveColor]セレクタを試してみてください。ヌル

のプロパティ「マッピング」を設定することはできません私はそれは、アレイ上の問題であると考えているが、私は、配列を設定する方法を見つけ出すことはできませんこれは正しく機能するようになります。私はresponse.dataの配列であると仮定又はANS vm.projektないVUE-ゲッターregistredがないnullとオブジェクト

draw: function(){ 

    this.cy = cytoscape({ 
      container: document.getElementById('cy'), 
       layout: { 
       name: this.main_layout, 
       padding: 10 
       }, 
       style: cytoscape.stylesheet() 
       .selector('node') 
        .css({ 
        'shape': 'data(faveShape)', 
        'width': 'mapData(weight, 40, 80, 20, 60)', 
        'content': 'data(name)', 
        'text-valign': 'center', 
        'text-outline-width': 2, 
        'text-outline-color': 'data(faveColor)', 
        'background-color': 'data(faveColor)', 
        'color': '#fff' 
        }) 
       .selector(':selected') 
        .css({ 
        'border-width': 3, 
        'border-color': '#333' 
        }) 
       .selector('edge') 
        .css({ 
        'curve-style': 'bezier', 
        'opacity': 0.666, 
        'width': 'mapData(strength, 70, 100, 2, 6)', 
        'target-arrow-shape': 'triangle', 
        'source-arrow-shape': 'circle', 
        'line-color': 'data(faveColor)', 
        'source-arrow-color': 'data(faveColor)', 
        'target-arrow-color': 'data(faveColor)' 
        }) 
       .selector('edge.questionable') 
        .css({ 
        'line-style': 'dotted', 
        'target-arrow-shape': 'diamond' 
        }) 
       .selector('.faded') 
        .css({ 
        'opacity': 0.25, 
        'text-opacity': 0 
        }), 
       elements: { 
       nodes: this.nodes 

       }, 

       ready: function(){ 
       window.cy = this; 
       } 
      }); 

答えて

0

:ここ

コードです。だから私はにAJAX-件のデータをプッシュするあなたを助言する(この)

代わりに、一般的には

vm.projekt = response.data

のすべてのVUEのインスタンスで$セットもある

Vue.set(vm, 'projekt', response.data)を行うにしてみてください非常にうまく動作します。

+0

このようにすれば、コンソールではまだnullが返されます。どうしましたか?ここにjsbin [リンク] https://jsbin.com/piwusuyici/edit?jsです。私はnpmを使用しています。 – Tim

+0

jsbinが動作しません。あなたが得ようとしているURLは間違っています。スコープの問題はありません。 – Reiner

+0

それはちょうどコードだった。しかし、なぜ私はまだconsole.log(this.projekt)でnullになっていますか? – Tim

関連する問題