Leveraging properties in computed Vue.js

Question

Leveraging properties in computed Vue.js

I have a computed property that looks like this:

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

This property receives data as props:

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

Both plotDt and labs are arrays of the same length (For example, if I input two arrays: [a, b, c] and [1, 2, 3], I expect to get a mapped array like this: [[a, 1], [b, 2], [c, 3]])

Despite this expectation, it seems like something is not quite right. When I check in VueTools, I receive an error message stating: "error during evaluation". I'm unsure what could be causing this issue.

javascript vue.js vuejs2

Answer 1

Answer №1

One potential solution might be:

 showData() {
     const context = this;
     return this.dataSet.map(function(item, index) {
        return [item, context.plotChart[index]];
      });
    }

Consider using a method instead of computed property as well. Would you mind sharing a code pen?

Answer 2

One potential solution might be:

 showData() {
     const context = this;
     return this.dataSet.map(function(item, index) {
        return [item, context.plotChart[index]];
      });
    }

Consider using a method instead of computed property as well. Would you mind sharing a code pen?

Answer 3

Answer №2

this will not be accessible inside the function unless using an arrow function or binding this with the map

You can resolve the issue in two ways:

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);
}

Answer 4

this will not be accessible inside the function unless using an arrow function or binding this with the map

You can resolve the issue in two ways:

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);
}

Leveraging properties in computed Vue.js

Answer №1

Answer №2

Similar questions

Utilizing a TypeScript function to trigger an action from within a Chart.js option callback

Using jQuery to display a div after a 2-second delay on my website, ensuring it only appears once and does not reappear when the page is refreshed or when navigating to a

Exploring the implementation of Chain Map or Chain Filter within an Angular Http request that delivers a promise

Interactive hover effect in JavaScript displays a larger version of other thumbnails when hovering over a dynamically loaded thumbnail image, instead of its own full-size image

Utilize Vue and Django to submit dynamic form data efficiently

Testing with karma/jasmine in AngularJS can lead to issues when there are conflicts between test

JavaScript finding items in an array

The file reading code in my Node.js application suddenly stopped working

Guidance on uploading a file with AJAX in PHP following the display of a Sweet Alert

Browsing through a jQuery JSON object in Chrome reveals a dynamic reshuffling of its order

Looking for assistance with a simple Javascript program

Tips for passing a function to express-handlebars within a node.js-express application

What steps should be followed to execute this moment.js code in an Angular.js controller using Node.js?

Tips for preventing special characters from being entered into a Kendo grid input column

Can anyone recommend a speedy sorting algorithm for an extensive list of objects in JavaScript?

It seems like there may be an issue with the React Table Pagination in reactjs

Angular connecting to the count of filtered items

React throws a "ReferenceError: indexedDB is not defined" but surprisingly, it still manages to function properly

Exploring the Past: How the History API, Ajax Pages, and

Tips for utilizing process.stdin in Node.js with Javascript?