Vue.js v-forにおけるFirebaseのデータオブジェクトの順序を制御する

問題

• Vue.jsのv-forにおけるオブジェクト展開は順序が保証されない
• Firebaseのデータはオブジェクトである

対応

• 配列に変換してビューへ流す

例

var snapToArray = function(snap){
  var results = []
  snap.forEach(a => {
      var item = a.val()
      item.key = a.key
      results.push(item)
  })
  return results
}
firebase.database().ref().child('test').orderByChild('created').once('value', snap => {
  var results = snapToArray(snap)
  console.log(results)
})

Firebaseからのデータ取得にてコールバックに渡されるスナップショットはval()するとデータであるオブジェクトを返す。

snap.val()

これをするとorderした順序も取得できない。

そこでスナップショットをforEachすることでorderされた順序でデータが展開できる。

Vue.jsは配列がメイン、Firebaseはオブジェクト。

んー・・こういうもの？