Question

首先让我向您介绍我的项目。我正在设计一个Web应用程序，它将显示一些分散在一个国家/地区的设备的数据。为了创建这个，我使用了Vue.js和HighCharts（地图部分的HighMaps）。这是我现在取得的成果。

我现在想要添加的是最终用户点击标记区域并显示该区域中的所有设备的可能性。要做到这一点，我需要区域＆＃34; ID＆＃34;，在HighMaps中调用代码，向我的数据库发送ajax请求，我也想制作这个新的＆＃34; div＆＃34;一个组件，以便我可以在我的应用程序中自由使用它。我会给出一个我的意思的素描图像（请原谅我真正糟糕的绘画技巧：D）：

黑线并不重要，我想要实现的是显示地图之外的新组件（或任何地方）。接下来是我当前的代码，我正在使用一个页面，一个组件样式，因此模板和脚本标签都在同一个文件中，我在脚本中省略了标记所有不必要的东西。现在我只是设置一个带有大括号的div来更新变量上的变量，只是为了更容易调试。我的主要问题是，在 plotOptions.series.point.events.click 中，当我尝试引用 this.foo 变量时，它不会设置它div没有更新。我认为这可能是一个范围问题，但我不知道从哪里开始寻找。

<template>
  <div id="canvasContainer">
    <highmaps :options="chartOptions"></highmaps>
    <app-componentForDevices><app-componentForDevices>
    <div>{{foo}}</div>
  </div>
</template>

<script>
  import HighCharts from 'vue-highcharts';
  import json from '../map.json'

  export default {
    data: function () {
      return {
        foo: 'NO',
        /* Map */
        chartOptions: {
          chart: {
            map: json, // The map data is taken from the .json file imported above
          },
          plotOptions: {
            series: {
              point: {
                events: {
                  click: function () {
                    this.foo='OK'
                  }
                }
              }
            },
            map: {
              joinBy: ['hc-key', 'code'],
              allAreas: false,
              tooltip: {
                headerFormat: '',
                pointFormat: '{point.name}: <b>{series.name}</b>'
              },
            }
          },
          /* Zoom and move */
          mapNavigation: {
            enabled: true,
            buttonOptions: {
              verticalAlign: 'bottom'
            }
          },
          series: [
            {
              allAreas: true,
              showInLegend: false,
            },
            {
              borderColor: '#a0451c',
              cursor: 'pointer',
              name: 'ERROR',
              color: "red",
              data: ['it-na', 'it-mi', 'it-mo', 'it-ud'].map(function (code) {
                return {code: code};
              }),
            },
            {
              borderColor: '#a09e21',
              cursor: 'pointer',
              name: 'WARNING',
              color: "yellow",
              data: ['it-ts', 'it-av', 'it-ri'].map(function (code) {
                return {code: code};
              }),
            },
            {
              borderColor: '#4ea02a',
              cursor: 'pointer',
              name: "OK",
              color: "lightgreen",
              data: ['it-pa', 'it-ve', 'it-bo', 'it-ta', 'it-pn'].map(function (code) {
                return {code: code};
              }),
            },
          ],
        }
      }
    }
  }
</script>

<style scoped>
  svg{
    align-items: center;
  }

提前感谢您的帮助。干杯！

修改

我刚刚尝试了@icecream_hobbit的建议并使用了ECMA6箭头功能，因为现在我可以访问Vue中的变量存储但现在我失去了对this.name这样的本地参数的访问权限我可以打印所选区域。有任何想法吗？我错过了什么吗？

EDITv2

感谢@icecream_hobbit，我找到了一种方法来做我想做的事。您只需在括号内添加一个对象，以便可以将this用于全局变量，并将e用于鼠标单击事件。

events: {
           click: (e) => {
             this.foo = 'OK'
             this.foo = e.point.name
           }
}

Answer 1

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

在箭头函数之前，每个新函数都定义了自己的这个值（构造函数中的新对象，在严格模式下未定义）函数调用，如果函数被调用为基础对象 “对象方法”等。）

您访问的this不属于Vue实例。您可以使用箭头函数() => {/*function body*/}继承Vue实例的this。

箭头函数表达式的语法短于函数表达式并没有自己的this，arguments，super或者 new.target。

编辑：对于如何添加的问题，我可以使用闭包来获取Vue实例和对象实例。

click: function(VueInstance){
    return function() {
        VueInstance.Foo = 'OK';
    }(this)
}

Vue.js - Highmaps - 从图表

修改

EDITv2

1 个答案: