Как я могу заполнить массив, вызвав метод в Vue js?

Question

Я пытаюсь заполнить массив, объявленный в свойстве data, вызывая функцию в свойстве методов в Vue js. Вот код:

<script>
export default {
  extends: Bar,
  mounted() {
    this.renderChart(this.chartData, this.options);
    this.fillLabel();
  },
  data() {
    return {
      chartData: {
        labels:[],
        datasets: [
          {
            label: "Users",
            data: [40,20,12,39,10,40]
          }
        ]
      },

    };
  },
  methods: {
    fillLabel() {
      this.chartData.datasets[0].data.map(function (key,value) {
          this.chartData.labels.push(key);
      })

    }
  }
};
</script>

Но это дает мне следующую ошибку в консоли:

[Vue warn]: Ошибка в смонтированном хуке: "Ошибка типа: Не удается прочитать свойство 'chartData' of undefined "

Так как мне заполнить массив меток (внутри chatData) на 0 к длине массива данных (внутри наборов данных).

Я ищу вашу Помогите. Заранее спасибо.

Answer 1

Нужно только ввести this в ваш fillLabel метод, как показано ниже: я попробовал это решение, и оно устранило проблему

fillLabel() {
            let th = this;
            th.chartData.datasets[0].data.map(function (key,value) {
                th.chartData.labels.push(key);
            })
            alert(th.chartData.labels)

        },

Answer 2

Это связано с тем, что ваша функция внутри функции карты потеряет контекст this. и поэтому он становится неопределенным.

для решения этой проблемы используйте функцию стрелки внутри вашей карты.

this.chartData.datasets [0] .data.map ((key, value ) => {this.chartData.labels.pu sh (ключ);})

это решит проблему