2017-04-24 24 views
0

私は現在、VueJS、Firebase、VueFireを使ってプロジェクトを作成しています。私が持っている問題は、最も古いものから最新のもののリストを注文することです。VueFireを使用して、私のリストを降順(最新から古い)で日付順に並べるにはどうすればいいですか?

list.orderByChild('date')のようなFirebaseの組み込みクエリを使用しようとしましたが、運はありません。

私はArray.sort((a,b) => { return new Date(a.date) - new Date(b.date) })を使用する必要があると知っていますが、私はVueFireで動作するようになったり、Vueフィルタを作成したりするのに苦労しています。

他に何か提供できるかどうか教えてください。

これは私のデータベースは、次のようになります。ここでは

1

私のコードは次のとおりです。

2

答えて

1

は、あなたがポストを取得し、配列に格納されていると仮定すると、[] v-forを使用して配列をループし、投稿を表示します。

あなたはこの回避策を使用することができます。

  • デフォルトでは、あなたがfirebaseからの投稿を取得するとき、あなたは古いものから最新の投稿を取得

  • をので、あなたに記事を追加するArray.unshift()メソッドを使用することができます配列に逆順で項目が追加されているので、配列の項目の順序を逆にする投稿配列

  • あなたは今ではを使って定期的に投稿をループすることができますと(orderByChild('date')を使用してほか)最も簡単なオプションは、おそらくあなたはこのようなものだろうcomputed property、だろうoostsに

0

を表示する次の場合のいずれかの

import firebase from './firebase' 

var vm = new Vue({ 
    el: '#example', 
    firebase // bring in your firebase module here 
    data: { 
    message: 'Hello' 
    }, 
    computed: { 
    // a computed getter 
    sortedList: function() { 
     // `this` points to the vm instance 
     return this.items.sort((a,b) => { return new Date(a.date) - new Date(b.date) }) 
    } 
    } 
}) 

このプロパティが自動的に更新されますそれが依存しているプロパティは変更されていますので、リアルタイムでそのままにしてください& react:

0

お返事ありがとうございます!

私が実際にやったことは、私がデータベースに保存していたリスト項目に別の値を追加することでした。

私はそれをfirebaseするオブジェクトは、このような何かに見えた保存されたとき、私はとても子供orderを追加しました:あなたはorderByChild()を呼び出すとき、それは昇順でそれを注文しますので、私はそれを負の値を与えた

var newItem = { 
    title: "Title to the post", 
    order: (this.itemListFromDatabase.length + 1) * -1 
} 
firebase.database().ref('itemList').push(newItem); 

を。今すぐうまくいくと思われる。

私は私のリストを取得する場合、それは次のようになります。

firebase: { 
    list: firebase.database().ref('list').orderByChild('order') 
} 
関連する問題