push object to array of arrays vue re-rendering failing

Question

I have this weird issue where I can't seem to push an object to an array of arrays. I am able to log the value of groups....but I can't update it.

here's my function to push to the groups array under a given set of conditions

 calcExclusion: function(){
                this.hideExclusionGroups = true //hides the exclusion groups from app before calculations

                for(var i = 0; i < this.exclusionGroups.length; i++){

                        if(this.numberOfGroups < this.exclusionGroups.length){
                            alert('could not calculate, there are more exclusion groups than groups')
                            return
                        }
                for(var j = 0; j < this.exclusionGroups[i].students.length; j++){

                            if(this.exclusionGroups[i].students.length == 1){
                                alert ('could not calculate, groups must be bigger than 1')
                                return
                            }  

                                //console.log('group number', g,'student to add',this.exclusionGroups[i].students[j])
                            if(j < this.numberOfGroups){
                           this.groups[i].push(this.exclusionGroups[i].students[j].first_name) 
                            console.log(this.groups[i])
                            }                   
                     }

                }

            },

here is where I render the data

<div v-for="(group, index) in groups" class="d-inline-block bg-white p-2 m-2 border rounded">
                            <span>Group {{ index + 1 }}</span>
                            <ul>
                                <li class="groupItems" v-for="student in group">
                                    {{ student.first_name }}
                                    <input type="hidden" :name="'group['+index+']'" :value="student.id">
                                </li>
                            </ul>
                        </div>

I am able to edit 'groups' to some extent but groups is referencing the computed prop here

computed: {
                groups: function () {

                    if(! Number.isInteger(this.numberOfGroups)) {
                        console.log('mal');
                        return [];
                    }

                    const array = [];

                    for (let j = 0; j < this.numberOfGroups; j++) {
                        array[j] = [];
                    }

                    let i = 0;
                    this.students.forEach((student) => {
                        const x = i % this.numberOfGroups;
                        if(student.include === false){
                        array[x].push(student);
                        }
                        i++;
                    });

                    return array;
                },
            },

What happens when you try to push the object? How does it not "work"? — tony19, Apr 11 '20 at 04:27
my apologies for not including a better description, the loop iterates over the location and does not alter the array in question (this.groups[groupCount]) at all and it also is not updated in the render. Even if I log it to the console it has not changed — monsterpiece, Apr 11 '20 at 04:29
There is too much code to review for just simple array push issue. Could you minimise the code or break it down in parts to just show where the issue is happening? and What is the current behaviour? What is the expected behaviour? thanks! — palaѕн, Apr 11 '20 at 05:17
I was able to play around with the function and log the array changes, now the array changes but the changes aren't reflected in the dom. I find this strange because I can manipulate groups[0] per say but I can't manipulate something at groups[0][0] I'm not sure if i'm messing with the reactive properties in vue and causing an error? — monsterpiece, Apr 11 '20 at 08:30

score 0 · Accepted Answer · answered Apr 11 '20 at 09:12

You are updating the results of a computed property. The result is not reactive, that's why you see that your code is updating the groups array, but you don't see any changed in the DOM.

You need to move the logic from calcExclusion inside the computed method for groups.

push object to array of arrays vue re-rendering failing

1 Answers1