Как получить доступ к данным вне функции onclick

Question

Мне нужно получить доступ к свойству данных моего компонента (id[]) из функции onClick моего объекта инициализации Chart, но я получаю ошибку 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

Используйте this при обращении к переменной из атрибута data и props вашего компонента.

Так что вместо:

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

Использование:

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

Answer 2

В onClick: function(evt, array) { }, this является экземпляром Chart. Чтобы связать контекст с экземпляром Vue, используйте функцию стрелки :

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

обновленная скрипка