vuejs3vue-reactivityproxy-object

Vue3 reactivity and proxy objects behaving apparently random


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?


Solution

  • 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);
    }