Double for loop without mutating prop, VUE3

Question

I have a 'data' props which say looks like this:

data = [
    {
      "label":"gender",
      "options":[
        {"text":"m","value":0},
        {"text":"f","value":1},
        {"text":"x", "value":null}
      ]
    },
    {
      "label":"age",
      "options":[
        {"text":"<30", "value":0},
        {"text":"<50","value":1},
        {"text":">50","value":3}
      ]
    }
  ]

In a computed property I want to have a new array which looks exactly like the data prop, with the difference that - for the sake of example let's say - I want to multiply the value in the options array by 2. In plain js I did this before, like this:

data.forEach(item => {
    item.options.forEach(option => {
      if (option.value !== null && option.value !== 0) {
        option.value *= 2;
      }
    })
  });

Now I'm trying to do this in a computed property, with .map(), so it doesn't mutate my data props, but I cant figure out how.

computed: {
  doubledValues() {
    var array = this.data.map((item) => {
      //...
      item.options.map((option) => {
        //... option.value * 2;
      });
    });
    return array;
  }
}

Answer 1

you can use map() method, like so:

computed: {
doubledValues() {
  return this.data.map(item => ({...item, options: item.options.map(obj => {
    return (obj.value != null) ? { ...obj, value: obj.value * 2 } : { ...obj }
  })})
  );
}
}