[FIXED] List of checkboxes wont update in dynamic generated array of checkboxes v-models

Issue

I have an array containing the key->value pair for a list of checkboxes. They render fine, but when you click on them nothing happens, unless I change a text input and then these checkboxes get re-rendered again with the new value (whichever I clicked before).

Checkboxes:

<el-col :span="24">
   <el-form-item class="permission-item" :span="24" :key="perm.name" v-for="perm in permissions" :label="perm.name">
       <el-switch v-model="role_permissions[perm.name]" />
   </el-form-item>
</el-col>

Other element that if I update then checkboxes update:

<el-col :span="8">
  <el-row>
    <el-col :span="24">
        <el-form-item label="Role Name" prop="name">
          <el-input v-model="role.name"/>
        </el-form-item>
    </el-col>
  </el-row>
</el-col>

The component:

export default {
    data() {
      return {
        role: this.role,
        permissions: [],
        role_permissions: {}
      };
    },
    methods: {
      getRole: async function(){
        //Inside axios ajax
        this.role = response.data.role;
      },
      getPermissions: async function(){
        //Inside axios ajax   
        this.permissions = response.data.permissions;          

        //Init the array with the values
        for(var i = 0; i < this.permissions.length; i++){
          this.role_permissions[this.permissions[i].name] = this.hasPerm(this.permissions[i].name);
        }        
      },
      hasPerm(name){
        for(var i = 0; i < this.role.permissions.length; i++){
          if(name === this.role.permissions[i].name){
            return true;
          }
        }
        return false;
      }
    },
    mounted() {
      this.getRole();
      this.getPermissions();
    },
  }

Can anyone give me some light as to why this is happening?

Solution

After a few days looking at the problem in reactivity, the fix was the following:

Changed this

role_permissions: {}

To this:

role_permissions: []

Then the critical part of why this was not working, was in the initialization of the array. This happens in getPermissions() and this is what I did:

Changed this:

for(var i = 0; i < this.permissions.length; i++){
   this.role_permissions[this.permissions[i].name] = this.hasPerm(this.permissions[i].name);
}   

To this:

for(var i = 0; i < this.permissions.length; i++){
   this.$set(this.role_permissions, this.permissions[i].name, this.hasPerm(this.permissions[i].name));
}

Instead of using "=" use "$set" for value assignment.

Answered By - nullwriter