[Vuejs]-Computed not reactive?

by

1👍

✅

The computed prop is actually being recomputed when you update user.skills, but the mapping of available_skills produces the same result, so there’s no apparent change.

Assuming user.skills contains the full skill set from available_skills, the first computation sets all skill.active to false. When the user clicks the skill to remove it, the re-computation doesn’t set skill.active again (there’s no else clause).

let result = available_skills.value.map((skill) => {
   if (
     user.value.skills
       .map((sk) => {
         return sk.name;
       })
       .includes(skill.label)
   ) {
     skill.active = false;
   }
   // ❌ no else to set `skill.active`

   return skill;
});

However, your computed prop has a side effect of mutating the original data (i.e., in skill.active = false), which should be avoided. The mapping above should clone the original skill item, and insert a new active property:

const skills = user.value.skills.map(sk => sk.name);

let result = available_skills.value.map((skill) => {
  return {
    ...skill,
    active: skills.includes(skill.label)
  }
});

demo

👤tony19

2👍

In JavaScript user or an object is a refence to the object which is the pointer itself will not change upon changing the underling properties hence the computed is not triggered
kid of like computed property for an array and if that array get pushed with new values, the pointer of the array does not change but the underling reference only changes.

Work around:
try and reassign user by shadowing the variable

👤KaranV

1👍

slice just returns a copy of the changed array, it doesn’t change the original instance..hence computed property is not reactive

Try using below code

user.skills = user.skills.splice(index, 1);
👤shalini

Leave a comment