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

【问题标题】：push object to array of arrays vue re-rendering failing将对象推送到数组数组vue重新渲染失败
【发布时间】：2020-07-23 21:35:08
【问题描述】：

我有一个奇怪的问题，我似乎无法将对象推送到数组数组。我可以记录组的值....但我无法更新它。

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

 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>

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

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

【问题讨论】：

当您尝试推动对象时会发生什么？它怎么不“工作”？
我很抱歉没有包含更好的描述，循环遍历位置并且根本不改变有问题的数组（this.groups [groupCount]），它也没有在渲染中更新.即使我将它记录到控制台它也没有改变
对于简单的数组推送问题，有太多代码需要查看。您能否最小化代码或将其分解为仅显示问题所在的位置？当前的行为是什么？预期的行为是什么？谢谢！
我能够使用该函数并记录数组更改，现在数组更改但更改未反映在 dom 中。我觉得这很奇怪，因为我可以按说操作 groups[0] 但我不能在 groups[0][0] 操作某些东西我不确定我是否弄乱了 vue 中的反应属性并导致错误？

标签： arrays vue.js object vue-data

【解决方案1】：

您正在更新 computed 属性的结果。结果不是响应式的，这就是为什么您会看到您的代码正在更新 groups 数组，但您在 DOM 中看不到任何更改。

您需要将calcExclusion 中的逻辑移到computed 方法中，用于groups。

【讨论】：