Question

我已将click事件处理程序附加到我的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中获得Chart上下文，但不再有权访问my_data。如果我使用您的方式，则会得到this.my_data，但会丢失Chart上下文。

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”在点击事件处理程序中不起作用

更新

2 个答案: