如何针对特定顺序进行v-for迭代？

Question

我有一个对象随机排列的对象数组。我想按特定顺序列出（键）中的值。

例如，下面的迭代仅列出了它们：

var vm = new Vue({
  el: "#root",
  data: {
    all: [{
        second: 2,
        third: 3,
        first: 1
      },
      {
        third: 30,
        first: 10,
        second: 20
      }
    ],
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="root">
  <div v-for="a in all">
    <div v-for="(v, k) in a">{{v}}</div>
  </div>
</div>

这是否可能驱动迭代，以便根据将产生的键列表（["first", "second", third"]）进行排序

1
2
3
10
20
30

Answer 1

我不知道vue，但是您可以在javascript中这样做。

<div v-for="k in Object.keys(a).sort()">{{k}}:{{a[k]}}</div>

还要注意，字母排序偶然符合您的需求，但是您可能需要一个自定义排序功能，例如sort((a,b)=>order.indexOf(a)-order.indexOf(b))您的自定义订单order: ["first","second","third","fourth"]，而这可能不是字母排序。

<div v-for="k in Object.keys(a).sort()">{{k}}:{{a[k]}}</div>

var vm = new Vue({
  el: "#root",
  data: {
    all: [{
        second: 2,
        third: 3,
        first: 1,
        fourth: 4
      },
      {
        third: 30,
        first: 10,
        second: 20,
        fourth: 40
      }
    ],
    order: ["first","second","third","fourth"]
  }
})

Answer 2

您可以将排序后的键列表放入一个数组中，然后v-for放在该数组之上。

<div v-for="a in all">
  <div v-for="key in presortedListOfKeys">
    {{a[key]}}
  </div>
</div>