我如何按包含 vue.js 的時間戳索引的快照的子數據進行排序

Question

我將時間戳保存為 firebase 數據庫中的數據字段，這樣我現在可以像 {{ post.timestamp }} 一樣檢索它來顯示它，我將如何從我所在的位置 go 按時間戳順序排序帖子，而不管user object order 例如，我在UI中得到的是用戶排序的帖子，而不是時間。

firebase 上的數據如下所示：

代碼如下所示：

    <template>
    <div>
           <div
           v-for="post in allPosts.slice().reverse()"
           :key="post._key">
           <v-card class=" feed-card my-3">
           <v-row no-gutters>
           <v-col cols="1">
           <v-img
           class="align-center rounded-xl "
           width="30"
           :src="post.photoURL">
           </v-img>
           </v-col>
           <v-col cols="10">
             <p class="">{{post.postText}}</p>
             <p class="blue-grey--text ">{{post.displayName}}</p>
             <p class="mb-n1 mt-n5 d-flex flex-row-reverse"> {{post.date}} {{post.time}}</p>
             </v-col>
             </v-row>
       </v-card>
     </div>
   </div>
</template>
<script>
import firebase from '@/plugins/firebase'

let db = firebase.database();
//let usersRef = db.ref('users');
let postRef = db.ref('posts');
export default {
  name: 'FintechSocialFeed',
  data: () => ({
  authUser: null,
  allPosts: [] // initialise an array
}),
  methods: {
  },
  created: function() {
    data => console.log(data.user, data.credential.accessToken)
    firebase.auth().onAuthStateChanged(user => {
        if (user) {
          postRef.on('value', snapshot => {
            const val = snapshot.val()
            if (val) {
              this.allPosts = Object.values(val).flatMap(posts =>
              Object.entries(posts).map(([ _key, post ]) => ({ _key, ...post})))
            }
            console.log(snapshot.val())
          });
        }

     })
   }
}
</script>

這是在底部顯示最新帖子的用戶界面，因為它是按用戶而不是日期排序的：

Answer 1

我不使用 firebase，但它看起來像數據庫參考提供orderByKey ，所以......

let postRef = db.ref('posts').orderByKey('timestamp');

另一種方法是在檢索后對自己進行分類......

this.allPosts = Object.values(val).flatMap(posts =>
    Object.entries(posts).map(([ _key, post ]) => ({ _key, ...post}))
).sort((a, b) => a.timestamp.toMillis() - b.timestamp.toMillis());