Question

我有一个由一些对象组成的数组，我想通过其中一个属性过滤结果。

这是对象：

  computed: {
starfleet() {
  const array = [
    {id: 1, order: 10},
    {id: 2, order: 9},
    {id: 3, order: 8},
    {id: 4, order:7}
  ]

我使用一个函数方法来尝试改变顺序：

  methods: {
superTab(starfleet) {
  return starfleet.orderBy(starfleet, 'order', 'asc');
},

在模板中，我使用迭代：

<div v-for="item in superTab" :key="item.order">
          {{ item.id }}/{{ item.order }}
        </div>

你能告诉我为什么它不起作用吗？

感谢您的帮助

Answer 1

请先尝试

computed: {
starfleet() {
  const array = [
    {id: 1, order: 10},
    {id: 2, order: 9},
    {id: 3, order: 8},
    {id: 4, order:7}
  ]
return array
}

像下面这样重写superTab

superTab() {
  return this.starfleet.orderBy(starfleet, 'order', 'asc');
},

Answer 2

您不应在 computed 中定义数据。在 data 完成。

您应该使用 computed 以任何其他形式返回数据，而不是在数据中的形式，排序数组就是一个完美的例子。

:key 应该具有唯一值。 :key="item.id" 可能会更好。

<template>
  <div v-for="item in superTab" :key="item.id">
    {{ item.id }}/{{ item.order }}
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      starfleet: [
        { id: 1, order: 10 },
        { id: 2, order: 9 },
        { id: 3, order: 8 },
        { id: 4, order: 7 },
      ],
    };
  },
  computed: {
    superTab() {
      return this.starfleet.sort((a, b) => a.order - b.order);
    },
  },
});
</script>

Vue SFC Playground

更改对象的顺序

2 个答案: