无法从数据组件填充图表 [vue-highcharts 包装器]

Question

我从 vue 的 Higcharts 包装器开始。目前，我正在将我在 vue 外部使用的股票图表代码迁移到包装器中。一切都很顺利，除了我无法从组件数据或计算变量中填充图表。仅来自硬写数组或组件道具。

这是代码：

<template>
  <highcharts
    class="stock"
    v-bind:constructor-type="'stockChart'"
    v-bind:options="config"
    v-bind:deepCopyOnUpdate="false"
  ></highcharts>
</template>

<script>
export default {
  name: "stockChart",
  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      config: {
        series: [{
          name: this.options.title,
          //data: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]] //THIS WORKS!
          //data: this.options.plotData                   //THIS ALSO WORKS!!
          data: this.plotData                             //THIS DOESN'T...
        }],
        (...)
      },
      plotData: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]]
    }
  },
  computed: {
    // THIS ALSO ISN'T WORKING... THAT IS HOW I WANT IT TO WORK
    /*plotData: function(){
        return this.options.xData.map((e,i) => [e, this.options.yData[i]]);
    }*/
  }
}

</script>
<style scoped>
    .stock {
      width: 70%;
      margin: 0 auto
    }
</style>

我什么都不懂。这三种方法应该是等价的。为什么我可以从道具中加载数据，但不能从数据或计算中加载？我找不到任何关于 vue 包装器的好的文档来理解为什么会发生这种情况。

感谢您的帮助，

H25E

Answer 1

答案很简单。原因是 Vue 只在返回一个完整的data 对象后才定义所有组件数据，因此您不应该使用this 关键字来引用data 定义中的其他组件数据。为了使其正常工作，您应该将plotData 保留在组件的data 中，但将config 移动到计算属性中。看看下面的代码：

  props: {
    options: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      plotData: [[1,3],[2,7],[3,9],[4,2],[5,0],[10,13]]
    }
  },
  computed: {
    config: function() {
      return {
        series: [{
          name: this.options.title,
          data: this.plotData
        }]
      }
    },
  }