vを特定の順序で反復する方法は？

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

並べ替えられたキーのリストを配列に入れ、その代わりにv-forを配置することができます。

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

Answer 2

計算されたプロパティを使用してallを得ることができますそれらを通る反復の前に最初に頼まれた。

Answer 3

私はvueを知らないが、これはjavascriptでこれを行うことができます。

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

はまた、アルファベットの並び替えが誤ってあなたの必要性に合うことに注意してください、しかし、あなたは、アルファベットではないかもしれないカスタムオーダーorder: ["first","second","third","fourth"]でsort((a,b)=>order.indexOf(a)-order.indexOf(b))などのカスタムソート機能が必要になる場合があります。私Vue.js Training courseのモジュール5では

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 4

、私は実際にこれを議論します。一見すると、Object.keysアプローチは正しいアプローチのように思えるかもしれません。ただし、JavaScriptエンジンが異なると、異なる順序でプロパティが返されます。そのため、あなたはそれに頼ることはできません。

Vue.jsでは、a）配列にデータが入力されたときに配列をソートするb）計算されたプロパティを作成するc）プロパティを渡すことができるソートメソッドを作成する。

私の意見では、bのオプションを使用する必要があります。その理由は、計算されたプロパティがキャッシュされるためです。これを行うと、ソートコードは1回だけ実行されます。ただし、オプションcを使用する場合、ソートは各反復中に実行されます。オプションが可能ですが、これが本当のオプションかどうかを知るためのシナリオについては十分に分かりません。