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

debugcn 发表于 Dev

网

我已经将一个单击事件处理程序附加到我的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上面的前面声明了它，则会获得Chart上下文this，但不再有权访问my_data。如果我使用您的方式，则会得到this.my_data，但会丢失Chart上下文。

和

您需要将处理程序放入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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。