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数据，第二个应该返回相同的东西，因为this.data是通过API调用中的data更新的，但是我得到一个__ob__。知道如何通过调用API获取this.data来包含json吗？

Answer 1

您正在覆盖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 2

我相信__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

Answer 3

正如@Ahmad所提到的，在组件本身内部操纵组件props并不是一种好习惯。但是，这不是我的问题。我的问题比这简单得多。

我的折线图是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

一起使用

数据变量返回为ob

3 个答案:

数据变量返回为__ob__

3 个答案:

数据变量返回为ob