Using props in computed Vue.js

Question

I have computed property like this:

  display() {
     return this.labs.map(function(x, i) {
        return [x, this.plotDt[i]];
      });
    }

It receives the data as props:

  props: ["plotDt", "labs"],

Which are arrays of same lenght (I input two arrays: [a,b,c] [1,2,3] and expect to get mapped array: [[a,1],[b,2],[c,3]]

However somehow it does not work and when I check in VueTools I get message: "error during evaluation" I dont really know what can be wrong in this case.

is [a,b,c] actually ['a','b','c']? are they both the same length? — depperm
– depperm, Commented Mar 19, 2020 at 11:23
you might look at: forum.vuejs.org/t/missing-error-details-for-computed-properties/… — depperm
– depperm, Commented Mar 19, 2020 at 11:27
@depperm Yes they are it works normally when I set those arrays in console and run that mapping method — Alex T
– Alex T, Commented Mar 19, 2020 at 11:39

Alex Brohshtut · Accepted Answer · 2020-03-19 11:38:25Z

1

A possible workaround could be:

 display() {
     const vm = this;
     return this.labs.map(function(x, i) {
        return [x, vm.plotDt[i]];
      });
    }

And it is also possible that you need to go for method instead of computed. Mind sharing code pen?

answered Mar 19, 2020 at 11:38

Alex Brohshtut

2,06013 silver badges15 bronze badges

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

2 Comments

Alex T Over a year ago

Do you have any resource that deals with this case? Or did you just thought of this on the spot?

Alex Brohshtut Over a year ago

This in function is not related to vue instance probably, so it is just my thoughts.

Rijosh · Accepted Answer · 2020-03-19 12:36:10Z

1

this won't have scope inside the function unless used the arrow function or bind this with the map

The issue can be solved either like

display() {
 return this.labs.map((x, i)=> {
    return [x, this.plotDt[i]];
 });
}

or

display() {
 return this.labs.map(function(x, i) {
    return [x, this.plotDt[i]];
  },this);
}

answered Mar 19, 2020 at 12:36

Rijosh

1,5641 gold badge9 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using props in computed Vue.js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related