Axios не загружает данные в vue

Я пытаюсь загрузить график cytoscape, используя vue и axios. В любом случае не могу настроить cytoscape, поэтому я сначала попробовал только с axios и vue. По-прежнему проблема с прицелом, но я не могу понять, где? Что мне изменить? Как правильно установить vue и axios.

ИЗМЕНИТЬ

Итак, после установки this.nodes я хотел бы нарисовать grapg в cytoscape.js, но всегда получаю ошибки:

-Свойство стиля text-outline-color: недействительно

-Не назначать сопоставления элементам без соответствующих данных (например, ele 6b899f09-359e-424d-9461-d71c8c3fcd3b для свойства text-outline-color с полем данных faveColor); попробуйте селектор [faveColor], чтобы ограничить область действия элементами с определенным faveColor

-Uncaught TypeError: невозможно установить свойство 'сопоставление' нуля

Я считаю, что это проблема с массивом, но я не могу понять, как правильно установить массив, чтобы это могло работать.

Вот код:

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

person Tim    schedule 01.09.2017    source источник


Ответы (1)


Я предполагаю, что response.data является массивом или объектом и vm.projekt с null не зарегистрирован vue-getter. Так что, пожалуйста, попробуйте сделать

Vue.set(vm, 'projekt', response.data) в каждом экземпляре vue также есть $ set (это)

вместо того

vm.projekt = response.data

В общем, я бы посоветовал вам поместить ajax-данные в реактивные массивы, это работает очень хорошо.

person Reiner    schedule 02.09.2017
comment
Если я сделаю это так, в консоли я все равно получу null. Что случилось? Вот jsbin [ссылка] jsbin.com/piwusuyici/edit?js Я использую npm. - person Tim; 02.09.2017
comment
Jsbin не работает. URL, который вы пытаетесь получить, вероятно, неверен. У вас нет проблем с определением объема работ. - person Reiner; 02.09.2017
comment
Это был просто код. Но почему тогда я все еще получаю null в console.log (this.projekt)? - person Tim; 03.09.2017
comment
this.to(); // ajax запускается, но fn вернется до того, как будет выполнен. Затем будет выполнен console.log(this.projekt); // this.project имеет значение null, потому что .then запускается после того, как консоль печатает журнал - person Reiner; 03.09.2017
comment
Это было на самом деле. Также есть новый вопрос о массиве. Я разместил код и объяснение в ответ. - person Tim; 04.09.2017
comment
Затем вы должны отметить его как ответ и открыть новый вопрос вместо того, чтобы заменять старый текст вопроса. - person Reiner; 04.09.2017