Axios 没有加载数据到 vue

Question

我正在尝试使用 vue 和 axios 加载 cytoscape 图。无论如何都无法配置 cytoscape，所以我首先尝试仅使用 axios 和 vue。范围仍然存在问题，但我不知道在哪里？我应该改变什么？如何正确设置vue和axios。

编辑

所以在设置 this.nodes 之后我想在 cytoscape.js 中绘制一个 grapg，但我总是得到错误：

-样式属性text-outline-color:无效

-不要将映射分配给没有相应数据的元素（例如ele 6b899f09-359e-424d-9461-d71c8c3fcd3b for 属性 text-outline-color with data field faveColor）；尝试使用 [faveColor] 选择器将范围限制为定义了 faveColor 的元素

-未捕获的类型错误：无法设置属性 'mapping' 为 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;
              }
          });

Answer 1

我假设 response.data 是一个数组或对象 ans vm.projekt with null 没有 vue-getter 注册。所以请尝试做

Vue.set(vm, 'projekt', response.data) 每个 vue 实例中也有一个 $set (this)

而不是

vm.projekt = response.data

一般来说，我会建议您将 ajax-datas 推入反应数组，效果很好。

Axios 没有加载数据到 vue

Axios not loading data to vue

cytoscape

cytoscape.js

vue.js

axios