将对象推送到数组数组 vue 重新渲染失败

Question

我遇到了一个奇怪的问题，我似乎无法将一个对象推送到一个数组数组中。我能够记录组的值....但我无法更新它。

这是我在给定条件下推送到组数组的函数

 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])
                            }                   
                     }

                }

            },

这里是我渲染数据的地方

<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>

我可以在某种程度上编辑 'groups'，但群组在此处引用计算的道具

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;
                },
            },

Answer 1

您正在更新 computed 属性的结果。结果不是反应性的，这就是为什么您看到您的代码正在更新 groups 数组，但您没有看到 DOM.

中的任何更改

您需要将逻辑从 calcExclusion 移动到 groups 的 computed 方法中。

将对象推送到数组数组 vue 重新渲染失败

push object to array of arrays vue re-rendering failing

arrays

object

vue.js

vue-data