“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獲得 Chart 上下文，但不再可以訪問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[]
        }
      }
}