"this" 在点击事件处理程序中不起作用

Question

我已将点击事件处理程序附加到我的 ChartJS 派生组件，如下所示：

export default {
  extends: HorizontalBar,
  data() {
    return {
      my_data: [],
      options: {
        onClick: function(event, args) {
           //need to access my_data here
        }
      },
    };
  },
}

我需要在处理程序中访问我的 data 成员之一。不幸的是，this.my_data 在这里不起作用。 ChartJS 文档告诉我这个事件是在 Chart 组件的上下文中调用的，而不是我的 Vue 组件。我怎样才能访问 my_data？

更新

所以我现在使用@Dan 定义处理程序的方式：

export default {
  extends: HorizontalBar,
  data() {
    return {
      my_data: [],
      options: {
        onClick: this.ClickHandler,
      },
    };
  },

  methods: {
    ClickHandler: function(event, args) {
      var datapoint = this.getElementAtEvent(event);
      var value = this.my_data[datapoint._datasetIndex];
    },
  }
}

处理程序被正确调用，但是 this 现在引用我的 Vue 组件，因此我没有任何对 Chart 上下文的引用来调用它的 getElementAtEvent。

因此，如果我在上面的 onClick 前面声明它，我会在 this 中获得图表上下文，但无法再访问 my_data。如果我使用你的方式，我会得到 this.my_data，但会丢失图表上下文。

Answer 1

您需要将处理程序放入您的 methods 对象中，然后从图表 options 处理程序中引用它：

data() {
  return {
    my_data: [],
    options: {
      onClick: this.ClickHandler,
    }
  };
},
methods: {
  ClickHandler: function(event, points) {
    // Here is how to access the chart
    const c = this._data._chart;
    const datapoint = c.getElementAtEvent(event)[0];
    const indexBar = datapoint._index;
    const indexSegment = datapoint._datasetIndex;
    // Do whatever with this.my_data, indexBar, and indexSegment
  }
}

组件可以通过 this._data._chart 访问图表。

Answer 2

创建闭包变量

data() {
    const vm = this;
    return {
      my_data: [],
      options: {
        onClick: function(event, args) {
           this.chartjs.something;
           vm.my_data[]
        }
      }
}

"this" 在点击事件处理程序中不起作用

"this" doesn't work in click event handler

javascript

vue.js

chart.js

vuejs2

vue-chartjs

更新