は、私は、ソート機能と基本的なテーブル作成していVueのコンポーネント

Question

に警告「あなたは機能レンダリングコンポーネントに無限の更新ループを有していてもよい」：何らかの理由で

<template> 
    <!-- more code --> 
    <tr v-for="item in sortBy(data.body, { name: 'name', order: 1 })"> 
    <td v-for="field in item">{{ field }}</td> 
    </tr> 
    <!-- data.body => [{ name: Group 1 }, { name: Group2 }, // etc.] --> 
</template> 

props: { 
    data: { 
    type: Object, 
    default() { 
     return {} 
    } 
    } 
}, 

methods: { 
    sortBy (data, params) { 
    // the warning disappears if I only leave "return data" 
    data.sort((a, b) => { 
     return a[params.name] - b[params.name] * params.order 
    }) 
    return data 
    } 
} 

を、私はこの警告を取得しています：

[Vue警告]：コンポーネントのレンダリング機能に無限のアップデートループがある可能性があります。

どうしてこれを修正するのですか？

Answer 1

sortBy内のdata.bodyの値を変更しているため、警告が表示されます。このデータ変更により、レンダー機能が再び実行されます。無限ループを起こさない理由は、sortByへの2回目の呼び出しでデータがすでにソートされているため、data.bodyにデータが変更されないということです。

解決策は、Jaromanda Xが言いました。スライスを使用すると配列のコピーが作成され、data.bodyの値は変更されないため、再レンダリングは呼び出されません。

return data.slice().sort(....