#この記事の概要

↓以前書いた記事で作った掲示板アプリの追加実装を行います。
Nuxt.js、Firebase、axiosでパパッと掲示板！

※※※
前回からの続きになっております
以下、適宜axiosメソッドに渡しているURLのYOUR_PROJECT_IDを自分のプロジェクトIDに置き換える必要があることに注意してください。
YOUR_PROJECT_IDのままだと以下のエラーが出ます。

追加するのは

・投稿日時の表示
・投稿日時順にソート

目標物

追加で導入するもの

・moment (時刻フォーマットの整形用)
・lodash (ソート用)

moment

ターミナル

$ npm install --save moment

pages/index.vue

<script>
import moment from 'moment';

#lodash

導入方法は以下参照ください。
webpack プラグインを追加するには？

nuxt.config.js

import webpack from 'webpack'
export default {

  //・・・・・・省略

  // Build Configuration (https://go.nuxtjs.dev/config-build)
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        _: 'lodash'
      })
    ]
  }
}

投稿日時の表示

送るデータにcreatedを追加

pages/index.vue

<script>
//・・・・・・・・・・・省略
  methods: {
    submitPosts() {
      this.$axios
        .$post(
          'https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts',
          {
            fields: {
              name: {
                stringValue: this.name
              },
              comment: {
                stringValue: this.comment
              },
//------------↓ここから--------------
              created: {
                timestampValue: new Date()
              }
//------------↑ここまで--------------
            }
          }
        )
        .then(() => {
          this.name = '';
          this.comment = '';
          this.getPosts();
        });
//・・・・・・・・・・・省略
</script>

そして表示

pages/index.vue

<template>

      <p>名前：{{post.fields.name.stringValue}}</p>
      <br>
      <p>コメント：{{post.fields.comment.stringValue}}</p>
      <br>
<!-----↓ここから-------------------------------------------------------->
      <p>投稿日時：{{post.fields.created.timestampValue}}</p>
      <br>
<!-----↑ここまで-------------------------------------------------------->
    </div>
  </div>
</template>

今こんな感じです。

あまり見慣れないフォーマットなのでわかりやすく整形します。

filterを使ってフォーマットを整形してあげましょう。
さらにここでmomentを使用しています。

pages/index.vue

<script>
//・・・・・・・・・・・省略
    getPosts() {
      this.$axios.$get(
        "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts"
      )
      .then(res => {
        this.posts = res.documents;
      });
    }
  },
//------------↓ここから--------------
  filters: {
    dateFilter(date) {
      return moment(date).format('YYYY/MM/DD HH:mm:ss');
    }
  }
//------------↑ここまで--------------
};
</script>

pages/index.vue

<template>
<!-----省略-------------------------->

      <p>投稿日時：{{post.fields.created.timestampValue | dateFilter}}</p>

<!-----省略--------------------------->
</template>

こうなったらOKです。

投稿日時でソートさせる

現状はこんな感じです。
これをソートさせて行きます。

lodashの_.orderBy関数を使います

第一引数にソートしたい配列もしくはオブジェクト。
第二引数に値を渡します。

pages/index.vue

<script>
//・・・・・・・・・・・省略
    getPosts() {
      this.$axios.$get(
        "https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts"
      )
      .then(res => {
//-----------------------↓ここ--------------
        this.posts = _.orderBy(res.documents, 'fields.created.timestampValue');
      });
    }
  },
  filters: {
    dateFilter(date) {
      return moment(date).format('YYYY/MM/DD HH:mm:ss');
    }
  }
};
</script>

OKです。
最後に昇順、降順を切り替えられる様にします。

昇順、降順の切り替え

pages/index.vue

<template>
  <div>
    <h1>掲示板！</h1>
    <br>名前
    <div>
      <input type="text" v-model="name">
    </div>コメント
    <div>
      <textarea v-model="comment"></textarea>
    </div>
    <br>
    <button @click="submitPosts">投稿する</button>
    <br>
    <br>
    <h2>投稿一覧</h2>
<!-----↓ここから-------------------------------------------------------->
    <select v-model="selected" @change="getPosts">
      <option>新しい順</option>
      <option>古い順</option>
    </select>
<!-----↑ここまで-------------------------------------------------------->


<!-----省略-------------------------->


</template>

<script>
import moment from 'moment';
export default {
  data() {
    return {
      name: '',
      comment: '',
      posts: [],
//--------↓ここ--------------
      selected: '新しい順'
    };
  },


//・・・・・・・・・・・省略
</script>

まずプルダウンを用意します
「新しい順」←→「古い順」と切り替わるごとにselectedにその値が入ります、
selectedのデフォルトの値は「新しい順」としておきます。
さらに切り替わるごとにgetPostsメソッドを呼びリストレンダリングをします。

pages/index.vue

<script>
//・・・・・・・・・・・省略
    getPosts() {
      console.log('getPost')
      this.$axios
        .$get(
          'https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/posts'
        )
        .then(res => {
          switch (this.selected) {
            case '新しい順':
              this.posts = _.orderBy(res.documents, 'fields.created.timestampValue');
              break;
            case '古い順':
              this.posts = _.orderBy(res.documents, 'fields.created.timestampValue', 'desc');
              break;
          }
        });
    }
  },
//・・・・・・・・・・・省略
</script>

_.orderByの第三引数に'desc'を渡すことで降順になります。
switch文でselectedの値が「新しい順」なら昇順、「古い順」なら降順とします。

※第三引数に'asc'を渡すことで昇順を指定することもできます。

完成！

pages/index.vue

<template>
  <div>
    <h1>掲示板！</h1>
    <br>名前
    <div>
      <input type="text" v-model="name">
    </div>コメント
    <div>
      <textarea v-model="comment"></textarea>
    </div>
    <br>
    <button @click="submitPosts">投稿する</button>
    <br>
    <br>
    <h2>投稿一覧</h2>
    <select v-model="selected" @change="getPosts">
      <option>新しい順</option>
      <option>古い順</option>
    </select>
    <br>
    <div v-for="post in posts" :key="post.id">
      <hr>
      <br>
      <p>名前：{{post.fields.name.stringValue}}</p>
      <br>
      <p>コメント：{{post.fields.comment.stringValue}}</p>
      <br>
      <p>投稿日時：{{post.fields.created.timestampValue | dateFilter}}</p>
      <br>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  data() {
    return {
      name: '',
      comment: '',
      posts: [],
      selected: '新しい順'
    };
  },
  created() {
    this.getPosts();
  },
  methods: {
    submitPosts() {
      this.$axios
        .$post(
          'https://firestore.googleapis.com/v1/projects/vue-test-df33d/databases/(default)/documents/posts',
          {
            fields: {
              name: {
                stringValue: this.name
              },
              comment: {
                stringValue: this.comment
              },
              created: {
                timestampValue: new Date()
              }
            }
          }
        )
        .then(() => {
          this.name = '';
          this.comment = '';
          this.getPosts();
        });
    },
    getPosts() {
      this.$axios
        .$get(
          'https://firestore.googleapis.com/v1/projects/vue-test-df33d/databases/(default)/documents/posts'
        )
        .then(res => {
          switch (this.selected) {
            case '新しい順':
              this.posts = _.orderBy(res.documents, 'fields.created.timestampValue');
              break;
            case '古い順':
              this.posts = _.orderBy(res.documents, 'fields.created.timestampValue', 'desc');
              break;
          }
        });
    }
  },
  filters: {
    dateFilter(date) {
      return moment(date).format('YYYY/MM/DD HH:mm:ss');
    }
  }
};
</script>

お疲れさまでした！
最終的に記事上部の目標物の様になっていればOKです。