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)
最好使用计算的 属性 预先计算它,这样它就不必在每次视图更新时都重新计算排序(计算的属性仅在必要时更新)。
我试图在渲染之前在嵌套的 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)
最好使用计算的 属性 预先计算它,这样它就不必在每次视图更新时都重新计算排序(计算的属性仅在必要时更新)。