Question

我有和对象数组，其元素是随机排序的。我想按特定顺序列出值（键）。

举个例子，下面的迭代只列出了它们：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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"]可能不是字母顺序。

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"]
  }
})

<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="k in Object.keys(a).sort((a,b)=>order.indexOf(a)-order.indexOf(b))">{{k}}:{{a[k]}}</div>
    <hr/>
  </div>
</div>

Answer 2

您可以将已排序的键列表放在一个数组中，然后v-for替换它。

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

Answer 3

您可以使用计算属性并在迭代之前首先排序all。

Answer 4

在我Vue.js Training course的第5单元中，我实际上是在讨论这个问题。乍一看，Object.keys方法似乎是正确的方法。但是，不同的JavaScript引擎以不同的顺序返回属性。因此，你不能依赖它。

在Vue.js中，你可以a）在填充数组时对数组进行排序b）创建“计算属性”或c）创建一个可以将属性传递给的属性的排序方法。

在我看来，你应该使用选项 b 。原因是因为计算属性被缓存。通过这样做，您只需运行一次排序代码。但是，如果您使用选项 c ，则会在每次迭代期间执行排序。选项 a 是可能的，但我不了解你的情况，知道这是否是一个真实的选择。

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

4 个答案: