数据变量返回为__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语句，第一个语句从api返回json数据，第二个语句应该返回相同的内容，因为通过API调用使用data更新了this.data，但是我得到了一个__ob__。你知道如何让this.data包含来自API调用的json吗？

Answer 1

正如@Ahmad提到的，在组件内部操作组件道具并不是一种好的做法。然而，这不是我的问题。我的问题要简单得多。

我的折线图是一个chartjs图表，因此labels和dataset中的data必须作为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 2

您正在覆盖prop！而你却没有使用它！你不应该在你的vue组件中操作props！相反，请使用另一个具有不同名称的数据属性：

 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 3

我相信__ob__: Observer是Vue反应系统的一部分。如果你看不到你的API的响应数据和观察者，那就意味着你的this.data没有更新。

看起来您正在尝试从一个道具设置this.data，所以您的父组件可能正在更改this.data。我建议在“线条图”组件中创建一个变量，将其设置为this.data，然后操作您的变量：

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

此外，您应该为浏览器获取Vue Devtool来检查变量的值，而不是控制台日志记录。https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en