我正在创建一个带有排序功能的基本表:
<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警告]:您可能在组件渲染功能中有一个无限的更新循环。
为什么会这样,以及如何解决它?
答案 0 :(得分:5)
您收到警告是因为您正在更改sortBy中的data.body值。此数据更改将导致渲染功能再次运行。你没有获得无限循环的原因是,在第二次调用sortBy时,数据已经被排序,导致data.body没有数据更改。
解决方案是Jaromanda X所提到的。使用slice将生成数组的副本,这意味着data.body不会更改值,因此不会调用重新呈现。
return data.slice().sort(....