我正在创建一个带有排序功能的基本表:

<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 warn]:组件渲染函数中可能存在无限更新循环.

这是为什么?如何解决?

推荐答案

您收到警告是因为您正在更改数据的值.身体脏兮兮的.此数据更改将导致渲染功能再次运行.没有得到无限循环的原因是,在第二次调用sortBy时,数据已经被排序,这不会导致数据发生任何更改.身体

解决方案就是Jaromanda X提到的.使用slice将生成数组的副本,即数据.主体的值不会改变,因此不会调用重新渲染.

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

Vue.js相关问答推荐

使用项目和字段,列跨度为 2 的 Bootstrap-vue 表

如何从mustache内的过滤器输出html

JSDoc 单文件 Vue 组件

Vue:在表格中显示嵌套数据

[Vue 警告]:渲染函数中的错误:TypeError:无法读取属性 'first_name' of null

正确实现 Vue.js + DataTables

Nuxt & Vuetify:如何控制 CSS 文件的加载顺序?

React.js 是否有类似 Vue.js

Vue @click 不适用于存在 href 的anchor锚标记

将数据传递给另一条路由上的组件

Vuetify / Offline离线图标

VueJS + Typescript:类型上不存在属性

如果我观看解构的props,Vue 3 手表将无法正常工作

全局禁用 vuetify 组件的涟漪效应

Vue 组件 Vue-Instant

Vue devServer 代理没有帮助,我仍然收到 CORS 错误

交换数组项

Vuetify 数据表不显示数据

Vue过滤器应该如何使用typescript绑定?

如何在 Vue.js 2 应用程序中模拟 onbeforeunload?