Массив VueJS возвращает length = 0

Question

Я создал массив в моем VueComponent.

Когда я запускаю console.log (myArray.length), он говорит «0», однако, если я запускаю console.log (myArray), он показывает, что массив содержит ожидаемые данные.Проверьте скриншот с консоли ниже.Первая часть показывает myArray, вторая - myArray.length (обведено красным)

Смотрите скриншот

Вот мой текущий код:

   Vue.component('invoice-archive', {
    data: function () {
                return {
    invoices: [],
      }
    },
    created() { 
       this.myUpdateMethod();
    },
    methods:{
      myUpdateMethod: function(){
          var $this = this;
          let data = { 'id': installationId };

          this.getAjax('myUrlHere', data).then(function (result) {  
            if(!result.length ) return; // <-- This was the problem
            $this.invoices.push(JSON.parse(result));
    console.log($this.invoices); // This shows the expected content of my array
console.log($this.invoices.length); // This shows 0
        }); 
      },
       getAjax(url, data, success) {

                return new Promise(function (resolve, reject) {

                    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

                    xhr.onload = function () {

                        resolve(this.responseText);
                    }

                    xhr.onerror = reject;

                    xhr.open('POST', url);

                    xhr.setRequestHeader('Content-Type', "application/json;charset=UTF-8");

                    xhr.send(JSON.stringify(data));               

                });
            },
    });

Answer 1

Это потому, что когда вы разрешаете обещание с помощью this.responseText, вы передаете в него строку.Сначала вам нужно будет преобразовать ответ в JSON, например:

resolve(JSON.parse(this.responseText));

Поскольку вы используете VueJS, вы можете рассмотреть возможность использования axios вместо того, чтобы использовать собственный обработчик запросов AJAX: https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html