web-dev-qa-db-ja.com

Vue JSでv-forおよびorderByフィルターを使用して配列の順序を逆にするにはどうすればよいですか？

Vue JSを使用して、ビューモデルバインディングを実行しています。 dataオブジェクトには、昇順（最も古いものから古いものへ）に並べ替えられたアイテムの配列があり、コードベースの理由でそのように保ちたいと思います。

var v = new Vue({
    el: '#app',
    data: {
        items: [
            {id: 51,  message: 'first'},
            {id: 265, message: 'second'},
            {id: 32,  message: 'third'}
        ],
    }
}

ただし、テンプレートに配列を表示するときは、降順（最新から最古）になるように順序を逆にします。私は次を試しました：

<ol>
    <li v-for="item in items | orderBy -1" track-by="id">

orderByフィルターは最初の引数としてフィールド名を必要とするため、これは機能しませんでした。

orderByフィルターを使用してv-for構文を使用してテンプレートでこれを実現する方法はありますか？または、カスタムreverseフィルターを作成する必要がありますか？

javascriptarraysvue.js
32
Soviut

注：以下はVue 1、ただしVue 2フィルターで動作します廃止予定であり、「プロパティまたはメソッド「リバース」はインスタンスで定義されていませんが、レンダリング中に参照されます。」を参照してください。tdom_93'sanswer for vue2.

カスタムフィルターを作成して、アイテムを逆の順序で返すことができます。

Vue.filter('reverse', function(value) {
  // slice to make a copy of array, then reverse the copy
  return value.slice().reverse();
});

次に、v-for式：

<ol>
    <li v-for="item in items | reverse" track-by="id">

https://jsfiddle.net/pespantelis/sgsdm6qc/

16
Pantelis Peslis

シンプルで簡潔なソリューション：

<li v-for="item in items.slice().reverse()">
//do something with item ...
</li>
62
NimaAJ

Vue2の更新

Vue2では、フィルターを使用せずに非推奨としてデータを操作できるいくつかの方法を示したいと思います。

計算されたプロパティ内

フィルターの代わりに計算されたプロパティを使用します。テンプレート内だけでなく、コンポーネント内のあらゆる場所でそのデータを使用できるため、はるかに優れています。 jsFiddle

computed: {
    reverseItems() {
        return this.items.slice().reverse();
  }     
}

Vuexゲッタープロパティ内

Vuexを使用していて、データをstore.stateオブジェクト。状態に格納されたデータを使用して変換を行う最良の方法は、gettersオブジェクト（など）で行うことです（たとえば、アイテムのリストをフィルター処理してそれらをカウントしたり、順序を逆にしたりします）。 。）

getters: {
    reverseItems: state => {
        return state.items.slice().reverse();
    }
}

コンポーネントの計算プロパティのゲッターから状態を取得します。

computed: {
    showDialogCancelMatch() {
        return this.$store.state.reverseItems;
    }
}
22
t_dom93

私のユースケース（明らかに、OPとは明らかに異なる...）では、v-for "ループ"に配列逆順のインデックスが必要でした。

私の解決策は、長さ-1から0までの整数の配列を返すVue appメソッドreverseRange(length)を作成することでした。それをv-forディレクティブで使用しましたそして、必要なたびに単に配列要素をmyArray[index]と呼びました。

そうすれば、インデックスの順序が逆になり、配列の要素にアクセスするためにそれらを使用することができました。

私のようにこの微妙なニュアンスでこのページにたどり着いた人の助けになることを願っています。

0
John Carrell

V-forディレクティブは逆方向の反復をサポートしていないため、最新の順序で並べ替える場合は、アイテムが追加されたときを示す別のフィールドを追加するか、毎回インクリメントするようにidを変更する必要がありますアイテムが追加されます。

次に、fieldが追加された順序を示すフィールドになります。

<li v-for="item in items | orderBy 'field' -1" track-by="id">
0
ErikOlson186