Axios lädt keine Daten zu vue

Question

Ich versuche, Cytoscape-Diagramm mit Vue und Axios laden. Wie auch immer, ich kann cytoscape nicht konfigurieren, also habe ich zuerst nur mit axios und vue versucht. Es gibt immer noch Probleme mit dem Umfang, aber ich kann nicht herausfinden, wo? Was soll ich ändern? Wie man Vue und Axios richtig einstellt.

EDIT

So nach this.nodes Einstellung Ich möchte einen grapg in cytoscape.js ziehen, aber ich habe immer Fehler erhalten:

-Der Stil Eigenschaft text-outline-color: ist ungültig

- Ordnen Sie Elementen ohne entsprechende Daten keine Zuordnungen zu (z. B. ele 6b899f09-359e-424d-9461-d71c8c3fcd3b für Eigenschaft text-outline-color mit Datenfeld faveColor); versuchen, einen [faveColor] Selektor Umfang Elemente mit faveColor

-Uncaught Typeerror definiert zu begrenzen: Kann nicht gesetzt Eigenschaft ‚Mapping‘ von null

Ich glaube, es Array Problem ist, aber ich kann nicht herausfinden, wie Array festlegen richtig, damit das funktioniert.

Hier Code:

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

Answer 1

Ich gehe davon aus, dass response.data ist ein Array oder ein Objekt Nationalstandard vm.projekt mit null gibt es keine vue-Getter registriert. Also versuchen Sie bitte

Vue.set(vm, 'projekt', response.data) gibt es auch einen $ Satz in jeder vue Instanz (this)

statt

vm.projekt = response.data

im Allgemeinen zu tun ich Ihnen raten würde Ajax-Daten aufrufen zu schieben und in reaktive Arrays, das funktioniert sehr gut.