从 Highchart 事件内部更改 VueJS 组件数据值答案

【问题标题】：change VueJS component data value from inside Highchart event从 Highchart 事件内部更改 VueJS 组件数据值
【发布时间】：2018-08-09 18:07:40
【问题描述】：

我正在使用vue2-highcharts 构建饼图。在包含 HighCharts 图表的组件中，有一个名为 showOverlay 的布尔变量。当 HighCharts click 事件发生时，我正在尝试更改 showOverlay 值。

组件代码为：

<template>
  <section class="charts">
    <vue-highcharts :options="pieOptions" ref="pieChart"></vue-highcharts>
  </section>
</template>

<script>
  /* eslint-disable */
  import VueHighcharts from 'vue2-highcharts'
  export default {
    components: {
      VueHighcharts
    },
    props: ['score', 'show'],
    data() {
      return {
        showOverlay: false,
        pieOptions:
          {
            chart: {
              type: "pie",
              options3d: {
                enabled: false,
                alpha: 45
              }
            },
            plotOptions: {
              pie: {
                innerSize: 100,
                depth: 45
              },
              series: {
                cursor: 'pointer',
                point: {
                  events: {
                    click: function (e) {
                      // ----- HERE I WANT TO SET showOverlay -----
                      // ----- for example: this.showOverlay = false -----
                      alert('Category: ' + this.name + ', value: ' + this.y);
                    }
                  }
                }
              }
            },
            series: [
              {
                name: "Platform Score",
                data: [
                  ["Spotify", 3],
                  ["Deezer", 1]
                ]
              }
            ]
          }
      }
    },
    methods: {
    }
  }
</script>

如您所见，我在代码中标记了要更改 showOverlay 值的位置，但 this 在该行保存了 HighCharts 实例，我不知道如何访问 Vue 实例以更改 showOverlay 值。

值得一提的是：最终目标是$emit对父组件的改变。我在另一个post 中找到了相关建议，将数据设置移动到mounted 挂钩并使用箭头函数：

mounted () {
  const that = this;
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
          that.$emit('somethingHappened', 'someData');
        }
      } 
    }]
  })
}

但是当我尝试了一些修改时：

mounted () {
    const that = this;
    this.$refs.pieChart.chart(this.$el, { 
      series: [{ 
        events: {
          click: () => { 
            that.$emit('somethingHappened', 'someData')
          }
        } 
      }]
    })
  },

我收到以下错误：

this.$refs.pieChart.chart is not a function

我该如何解决这个问题？

【问题讨论】：

如果你正在开始一个新的 vue 项目，你应该使用Official Highcharts Vue。
任何与我的问题相关的原因？
我的意思是使用非官方的包我认为你会得到更少的帮助。

标签： vue.js highcharts vuejs2

【解决方案1】：

在组件的数据中，将pieOptions.plotOptions.series.point.events.click 更改为arrow-function 将在处理程序中提供this 的Vue 实例。 HighCharts 系列点（以前 click-handler 中的 this）存储在事件参数中为 point，因此您的 pieOptions Vue 数据应如下所示：

click: ({point}) => {
  this.showOverlay = false;
  alert('Category: ' + point.name + ', value: ' + point.y);
  this.$emit('somethingHappened', 'someData');
}

demo

【讨论】：