我試圖在渲染之前對嵌套的 v-for 回圈中的物件進行排序。我已經弄清楚了排序，當我將它記錄到控制臺時，我可以看到它正在作業，但是當我回傳物件時chips，我收到一個警告：
[Vue warn]: You may have an infinite update loop in a component render function.
如果我創建物件的副本，對其進行排序并回傳chipsCopy，則它作業正常，并且沒有警告。很酷，但這似乎是不必要的多余。有什么我可以做的，這樣我就不需要制作副本而不影響 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);
},
},
uj5u.com熱心網友回復：
sort就地修改陣列。如果您不先創建陣列的副本，那么您將在渲染期間改變本地資料，這是不允許的（因此會出現無限更新回圈警告）。
在排序之前，您可以在方法的末尾像這樣淺拷貝陣列：
return chips.slice().sort(compare)
最好使用計算屬性預先計算它，這樣每次視圖更新時都不必重新計算排序（計算屬性僅在必要時更新）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/392121.html
標籤：javascript Vue.js 循环 排序 无限循环