Vue 警告无限循环,除非我创建对象的副本

Vue warns of infinite loop unless I create a copy of the object

我试图在渲染之前在嵌套的 v-for 循环中对对象进行排序。我弄清楚了排序,当我将它登录到控制台时,我可以看到它正在工作,但是当我 return 对象 chips 时,我收到警告:

[Vue warn]: You may have an infinite update loop in a component render function.

如果我创建该对象的副本,对其进行排序,然后 return chipsCopy 相反,它工作正常,并且没有警告。很酷,但这似乎是多余的。有什么我可以做的,这样我就不需要制作副本而不打乱 Vue 的渲染了吗?

Vue:

<div
    v-for="attachment in attachments"
    :key="attachment.attachment"
    :sort-by="attachment.attachmentDescription">
    <div>{{ attachment.attachment }}</div>
    <div>{{ attachment.attachmentDescription }}</div>
    <div
        v-for="(corsp, indx) in alphaOrder(attachment.correspondenceTemplateList)"
            :key="`${indx}-${attachment.attachment}-${corsp.categoryCode}-${corsp.letterCode}-${corsp.orgCode}`">
        <v-chip
            @click="gotoLetter(corsp.letterCode,corsp.orgCode)">
            {{ corsp.letterCode }}-{{ corsp.orgCode }}
        </v-chip>
    </div>
</div>

JS:

methods: {
    alphaOrder(chips) {
        // Must create a copy of the object or Vue warns of an infinite loop rendering error.
        const chipsCopy = chips.map(c => ({
            ...c,
        }));
        function compare(a, b) {
            var chipA = a.letterCode + "-" + a.orgCode;
            var chipB = b.letterCode + "-" + b.orgCode;
            if (chipA < chipB){
                return -1;
            }
            if (chipA > chipB){
                return 1;
            }
            return 0;
        }
        return chipsCopy.sort(compare);
    },
},

sort 修改数组就地。如果您不首先创建数组的副本,那么您将在渲染期间改变本地数据,这是不允许的(因此出现无限更新循环警告)。

您可以在排序之前在方法末尾像这样浅复制数组:

return chips.slice().sort(compare)

最好使用计算的 属性 预先计算它,这样它就不必在每次视图更新时都重新计算排序(计算的属性仅在必要时更新)。