“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[]
        }
      }
}