переменная данных возвращается как __ob__

Question

Я пытаюсь получить линейную диаграмму, используя vue-chart.js

Я использую следующий компонент Vue:

  Vue.component("line-plot", {
            extends: VueChartJs.Line,
            props: ["label", "data", "options"],
            mounted(){
                    fetch('api/data/monthlypaid')
                        .then(response => response.json()
                        .then(data =>{this.data = data;
                                      console.log(data);
                                      console.log(this.data); #replacing the statment above 
                                      }));
                    this.renderLineChart();
            }, 
            methods:{
                    renderLineChart: function () {
                        this.renderChart({
                            labels: this.data["DateReceived"],
                            datasets: [{
                                data: this.data ? this.data["AmountPaid"] : []
                                       }]

                            },
                            this.options )}
            },
            watch: {data: function () {
                              if (this._chart) {
                                 this._chart.destroy();
                              }
                              this.renderLineChart();
                          }
            }
    })

, затем я создаю свой экземпляр приложения Vue, которыйсодержит параметры для моего графика.У меня проблема с данными из API.У меня есть две console.log статистики, первая возвращает данные json из API, а вторая должна возвращать то же самое, поскольку this.data обновляется с помощью data из вызова API, однако я получаю __ob__,Любая идея, как получить this.data, чтобы содержать JSON из вызова API?

Answer 1

Вы перезаписываете prop! И вы не используете это! Вы не должны манипулировать props в компоненте vue! Вместо этого используйте другое свойство данных с другим именем:

 Vue.component("line-plot", {
        extends: VueChartJs.Line,
        props: ["label", "data", "options"],
        data(){
            return {
                 newData = this.data
                 // now you can manipulate this.newData
            }
        }
        mounted(){
                fetch('api/data/monthlypaid')
                    .then(response => response.json()
                    .then(data =>{this.newData = data;
                                  console.log(data);
                                  console.log(this.newData); #replacing the statment above 
                                  }));
                this.renderLineChart();
        }, 
        watch: {newData: function () {
                          if (this._chart) {
                             this._chart.destroy();
                          }
                          this.renderLineChart();
                      }
        }
})

Answer 2

Как упоминал @Ahmad, не рекомендуется манипулировать реквизитами компонентов внутри самого компонента.Однако это не было моей проблемой.моя проблема была намного проще, чем эта.

моя Линейная диаграмма - это chartjs диаграмма, поэтому labels и data внутри dataset должны быть переданы как array.Мой API отправлял данные в виде объектов JSON.Естественно, что 'Vuejs' преобразует извлеченные данные в __ob__.

, решение было либо изменить выход API (что я сделал), либо зациклить объект, который выглядит как {0:200, 1:455, ..., 20:90},используя функцию, подобную следующей:

var group = {0:200, 1:455, 2:44, 3:355, 20:90}; # this is how my object looks like
var dt = [];
var numbers = Object.keys(group);
numbers.forEach(function(number) {
  var item = Object.values(group[person]);
  dt.push(item);
});
return dt

Возвращает dt в виде массива, что делает его пригодным для использования с chartjs

Answer 3

Я считаю, что __ob__: Observer является частью системы реактивности Вью. Если вы не видите данные ответа вашего API вместе с наблюдателем, это означает, что ваш this.data не был обновлен.

Похоже, вы пытаетесь установить this.data из реквизита, поэтому возможно, что ваш родительский компонент меняется this.data. Я предлагаю, чтобы в вашем компоненте "line-plot" вы создали переменную, установили ее на this.data, а затем вместо этого манипулировали вашей переменной:

data() {
    return {data2: this.data}}
},watch: {data2: function () {
    ...
}

Кроме того, вместо записи в консоль вы должны получить Vue Devtool, чтобы ваш браузер проверял значения ваших переменных. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en