Vue3 reactivity and proxy objects behaving apparently random

Question

I am having difficulties with Vue 3 reactivity and proxy objects. I am using Option API and I have a Vue Component that on button click execute following code

submitUser() {
      let userCreated;
      userCreated = {
        id: this.user_tomodify.id,
        firstName: this.firstName,
        lastName: this.lastName,
        email: this.email,
        username: this.username,
      };
      this.$emit("onuserSubmitted", userCreated, this.usertype);
      this.hide();
    },

Now the code just create an object starting from the data of the component, firstName lastName etc are all v-model of input elements. The method called in the parent component emitting "onuserSubmitted" is the following

addUser(new_user, u_type) {
        this.users[u_type].push(new_user);
        MevoLogger.debug(this.users[u_type]);
        }

Where this.users is an Object that associated to the field contained in u_type variable some arrays. For better undestanding this is the computed property:

users() {
      switch (this.role) {
        case "ROLE_SECRETARY":
          return {
            STUDENT: this.students,
            TEACHER: this.teachers,
          };
        case "ROLE_TECHNICIAN":
          return {
            STUDENT: this.students,
            TEACHER: this.teachers,
            SECRETARY: this.secretaries,
          };
        case "ROLE_ADMIN":
          return {
            STUDENT: this.students,
            TEACHER: this.teachers,
            SECRETARY: this.secretaries,
            TECHNICIAN: this.technicians,
            ADMIN: this.admins,
          };

And i have a list in the page rendered with v-for = user in users[type]

The problem I am having is that apparently without any reason, when I push new_user in the array sometimes Vue create a normal object and sometimes a Proxy object ( i checked this printing in the browser console the users[u_type] array so i'm sure that this is the problem, literally randomly i see sometimes added a Proxy while sometimes a normal {} object), in the first case reactivity is not triggered and so i don't see in the page the new item added, in the second case reactivity works and page is updated. How is that even possible? What can I do in order to make it always create Proxy Objects?

Are all the values returned by the computed `users()` defined at **arrays** in the `data()` option? Also, could you provide a whole view of your parent Component (or at least the data and computed options) You can use `isreactive()` to check if the array you are updating is reactive, doc [here](https://vuejs.org/api/reactivity-utilities.html#isreactive) — Sebas R., May 23 '22 at 20:52
Yes, user is a computed property but all the arrays students, teachers ... are all defined in data option. I read the doc but it refers to composition API. as far as i knew push method is reactive in Vue, i can't understand why this is happening — Mirai, May 24 '22 at 07:11
When you `console.log(this.users[u_type])`, does it returns an array or a Proxy to an array (or is it random)? If it does always return a Proxy then the problem might be on the `v-for` — Sebas R., May 24 '22 at 18:53
It returns a Proxy object, in which field "target" is contained my array. I finally understood part of the problem, when a delete one of the items in the array i filter the array (target in Proxy Object) with the same array filtered using "filter" function in order to remove same array without the user to delete, The problem is that following this riassegnation my array changes, is not the target of a Proxy object anymore but it becomes an array of Proxy objects and it's now that if i try to add a user in this array, is not added a Proxy object (as the rest of the items) but a normal object — Mirai, May 26 '22 at 06:36

score 0 · Answer 1 · answered May 31 '22 at 05:24

If users is a computed property - it is readonly by design so if you somehow change it, its value will be recalculated/rebuilt on the next re-render. Or it might not change at all. You should push to the underlying array(s) - not to the computed property. E.g. push to students, teachers, etc.

For example:

addUser(new_user, u_type) 
{
  {
    STUDENT: this.students,
    TEACHER: this.teachers,
    SECRETARY: this.secretaries,
    TECHNICIAN: this.technicians,
    ADMIN: this.admins,
  }[u_type].push(new_user);
}

Vue3 reactivity and proxy objects behaving apparently random

1 Answers1