如何访问onclick函数之外的数据

Question

我需要从我的Chart初始化对象的id[]函数中访问我的组件的数据属性（onClick），但是当我尝试undefined时，我得到一个id[position]错误：

window.open("/#/user/history/detail/" + id[position], "_self");

我的数据属性：

data() {
  return {
    id: [1,2,3,4,5]
  };
}

和onClick功能：

mounted() {
  this._chart = new Chart({
    ...
    onClick: function(evt, array) {
      if (array.length != 0) {
        var position = array[0]._index;
        console.log(position);
        window.open("/#/user/history/detail/" + id[position], "_self"); //problem
      } else {
        console.log("You selected the background!");
      }
    }
  })
}

Answer 1

在onClick: function(evt, array) { }，this是Chart的例子。要将上下文绑定到Vue实例，请使用arrow function：

this._chart = new Chart({
  onClick: (evt, array) => {
    ...
    console.log(this.id[position])
  }
)

updated fiddle

Answer 2

在引用组件的this和data属性中的变量时，请使用props。

所以代替：

window.open("/#/user/history/detail/" + id[position], "_self");

使用：

window.open("/#/user/history/detail/" + this.id[position], "_self");