javascript - 数据变量作为 __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 数据，第二个应该返回相同的内容，因为 this.data已更新为 data从 API 调用中，但是我得到 __ob__ 。知道如何获得 this.data包含来自 API 调用的 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();
                      }
        }
})