Vue.js

Question

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

我现在想添加的是最终用户点击标记区域并显示该区域中所有设备的可能性。为此，我需要该地区的 "ID"（在 HighMaps 中调用代码）向我的数据库发送 ajax 请求，我还想将这个新的 "div" 设为一个组件，以便我可以在我的应用程序中自由使用它。我会放一张我的意思的草图（对不起，我的绘画技巧真的很差：D）：

黑线并不重要，我想实现的是在地图（或任何地方）之外显示一个新组件。接下来是我当前的代码，我使用的是一页，一个组件样式，所以 template 和 script 标签都在同一个文件中，我省略了在 script 标记所有不必要的东西。现在我只是设置了一个带有大括号的 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

Until arrow functions, every new function defined its own this value (a new object in the case of a constructor, undefined in strict mode function calls, the base object if the function is called as an "object method", etc.)

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

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target.

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

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

Vue.js - Highmaps - 从图表内部更改变量的值

Vue.js - Highmaps - change variable's value from inside chart

javascript

highmaps

编辑

EDITv2