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

Function for swapping out the alert message

Update nested child object in React without changing the original state

Deleting the clone <div> while ensuring the main <div> is kept clear of any remaining data

Is there a way to implement the focus function and invoke a JavaScript function within an ASP.NET application?

MUI: Autocomplete received an invalid value. None of the options correspond to the value of `0`

Inspecting the Ace Editor within the onbeforeunload event handler to confirm any modifications

Issues with Jquery keyup on Android devices - unable to detect keyup

Creating animated direction indicators in the "aroundMe" style with ngCordova

"Proceeding without waiting for resolution from a Promise's `.then`

Creating a new Vue instance for each component, rather than using a single

What is the best way to initiate a dialogue (updating component state) using Vue Router?

Exploring properties of nested elements in React

Guide to successfully downloading an xlsx file in angular through express

Creating a vertical stacked barchart using React and Svg without relying on any external libraries

The lookahead will only find a match if there are brackets present within the string

What could be the reason for my jQuery focusout (or blur) event failing to trigger?

There was an issue retrieving the value from the $.ajax() error function, as it returned [

Converting a JSON list into a JavaScript object for the purpose of creating a dynamic

The data point on jqPlot does not display in full

steps to iterate through an array or object in javascript