[Vuejs]-Computed variable doesn't invoke set() method. Using v-model in v-for for computed variable

by

0👍

✅

What am I doing wrong?

You have a computed array with a setter. The setter expects to receive a new value for the computed – an array in your case. Your input is bound to a member of a member of an element of that array. You can’t expect Vue to compose a modified array and pass that to your array setter.

The input will modify that member of a member of the actual element that your getter put into the computed array. Whether you can make use of that modification depends on how you composed the array.

If you want to modify individual elements, you probably want a real array and not a computed one. What objective are you working toward with this?

0👍

Some workarounds from https://www.reddit.com/r/vuejs/comments/741hwk/vfor_computed_value/

  • Use a computed property in the parent which maps over the original Array and produces a new Array of the desired format.
  • Or add a new component for rendering each item in the array. e.g. if the parent is then make a new child component which contains the computed properties that you want each child to have access to.
  • Or you’re also allowed to call methods in your prop expression so you could add a method on the parent component that returns the desired new value. This is probably less performant since method calls don’t get cached like computed properties but i don’t see why it wouldn’t work.

Leave a comment