2017-09-01 3 views
0

J'essaie de charger le graphique cytoscape en utilisant vue et axios. Quoi qu'il en soit, je ne peux pas configurer cytoscape donc j'ai essayé d'abord avec axios et vue seulement. Il y a toujours un problème de portée, mais je ne peux pas savoir où? Que devrais-je changer? Comment régler correctement la vue et axios.Axios ne charge pas les données à vue

EDIT

Ainsi, après la mise en this.nodes je voudrais dessiner un grapg dans cytoscape.js, mais je reçois toujours des erreurs:

-La propriété de style text-outline-color: est pas valable

-Ne pas affecter des mappages à des éléments sans données correspondantes (par exemple ele 6b899f09-359e-424d-9461-d71c8c3fcd3b pour la propriété text-outline-color avec le champ de données faveColor); essayez un sélecteur [faveColor] pour limiter la portée aux éléments avec faveColor définis

-Uncaught TypeError: Impossible de définir la propriété « mapping » de null

Je crois qu'il ya un problème de tableau, mais je ne peux pas comprendre comment définir ensemble correctement, cela peut fonctionner.

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

Répondre

0

Je suppose que response.data est un tableau ou un objet ans vm.projekt avec null il n'y a pas vue registred-getter. Alors s'il vous plaît essayer de faire

Vue.set(vm, 'projekt', response.data) il y a aussi un ensemble de $ dans chaque cas vue (ce)

au lieu de

vm.projekt = response.data

En général, je vous conseille de pousser ajax-données dans tableaux réactifs, cela fonctionne très bien.

+0

Si je le fais de cette façon, dans une console, je reçois toujours null. Qu'est-ce qui ne va pas? Voici jsbin [link] https://jsbin.com/piwusuyici/edit?js J'utilise npm. – Tim

+0

Le jsbin ne fonctionne pas. l'URL que vous essayez d'obtenir est propably tort. Vous n'avez pas de problème de portée. – Reiner

+0

C'était juste du code. Mais pourquoi je suis toujours en train de recevoir null dans console.log (this.projekt)? – Tim