v-forの中で要素毎に真偽値を適用させて表示のオンオフを切り替える方法

前回axiosでQiitaの自分の投稿記事を取得できました。今回はその取得した記事の中で３日以内に投稿された記事に対してのみ「New!」を付ける方法を書いてみます。

付けたい要素

v-forで渡ってくるitem.newBadgeの真偽値で表示を切り替える。
今回Bootstrapのバッジクラスの付いたDOMを適用させたいと思います。

<span v-show="item.newBadge" class="badge badge-danger">New!</span>

３日前を判定する

axiosで取得したデータのupdate_atプロパティに更新日が入ってますので、それをDateオブジェクトに変換し、今日の日付と引き算して３日前の記事を割り出します。
methods:に処理を記述していきます。

qiitaContentsProcessing: function() {
      const today = new Date()
      this.infoAll.forEach((info, i) => {
        const updateday = new Date(this.infoAll[i].updated_at);
        const day = (today - updateday) / 1000 / 60 / 60 / 24
        if (day < 3) {
          this.infoAll[i].newBadge = true
        } else {
          this.infoAll[i].newBadge = false
        }
      })
    }

todayからupdatedayを引いた数値が3未満(2.9999...)＝3日以内だったらnewBadge:trueというプロパティを新たに追加します。
3以上だったらnewBadge:falseを追加します。

要素を追加

v-forの中でspan要素毎にnewBadgeの真偽値に応じて表示、非表示が切り替わります。

<ul>
    <li v-for="item in infoAll" :key="item.id">
        {{ item.updated_at }}
        <span v-show="item.newBadge" class="badge badge-danger">New!</span><br>
        <a :href="item.url" target="_blank">
        {{ item.title }}
        </a>
    </li>
</ul>

まとめ

いろいろ試行錯誤した結果この方法に辿り着きました。今回の方法が正しいかどうかわかりませんが、オブジェクトに真偽値のプロパティを追加することでDOMへの対応の幅が広がりそうです。

おまけ

別の方法として文字列のNew!を追加するだけであれば

this.infoAll[i].updated_at = this.infoAll[i].updated_at  + 'New!'

if判定のtrueのブロック内に上記の記述で、プロパティやspan要素を記述することなくいけます。ただstyaleを当てれないので少し味気ない印象にはなりますね...
私も最初はこの方法でしたが、少し表示をリッチにしたいと思い、試行錯誤が始まった経緯です。