How can I fill an array by calling a method in Vue js?

Question

I am trying to fill an array, declared in data property, by calling a function in methods property in Vue js. Here is the code:

<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>

But this gives me following error in console :

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'chartData' of undefined"

So how can I fill the labels array(inside chatData) by 0 to length of data array(inside datasets).

I am looking for your help. Thanks in advance.

User arrow function to point the correct this :this.chartData.datasets[0].data.map((key,value)=>.... — Eldar
– Eldar, Commented Mar 25, 2020 at 6:44

Prabhat Gupta · Accepted Answer · 2020-03-25 06:46:04Z

1

This is due to the fact that your function inside your map function will loose the this context. and so its getting undefined.

to solve this problem use an arrow function inside your map.

this.chartData.datasets[0].data.map((key,value)=> { this.chartData.labels.push(key); })

this will solve the problem

answered Mar 25, 2020 at 6:46

Prabhat Gupta

1375 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saeed Jamali · Accepted Answer · 2020-03-25 06:53:51Z

1

Only need to introduce this to your fillLabel method as below: I tried this solution nd it fixed the problem

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

        },

answered Mar 25, 2020 at 6:53

Saeed Jamali

1,1952 gold badges8 silver badges21 bronze badges

Collectives™ on Stack Overflow

How can I fill an array by calling a method in Vue js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related