不能从数据组件中填充图表[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
        }]
      }
    },
  }