How to escape HTML string on Moment.js formatter inside Vue template?

Let’s say I have a current date filtered to February 22nd 2019. I want the nd sign to be inside the <sup class="small"></sup> tag. The problem is, I’m using Vue and Moment.js at the same time.

In PHP, I could just do:

{!! CarbonCarbon::today()->format('F d<sup class="small">S</sup> Y') !!}

but how can I do that in Javascript and Vue? Or maybe there is cleaner way to do so? Please take a look at my script..

<template>
    <div class="container">
        <!-- Textbox -->
        <div class="textbox text-white">
            <p>Realtime Flight Schedule</p>
            <div class="live-datetime">
                <h1>{{ currentDate | filterCurrentDate  }}</h1>
                <digi-clock></digi-clock>
            </div>
        </div>
        <!-- Flight table -->
        <flight-table></flight-table>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    filters: {
        filterCurrentDate(date) {
            return moment(date).format("MMMMM Do Y")
        }
    },
    data() {
        return {
            currentDate: new Date(),
        }
    },
}
</script>

Answer

I believe you have to use v-html for that. So you’d have filterCurrentDate generate the HTML from the Moment text, and then use v-html to render that as-is.

<h1 v-html="filterCurrentDateHTML(currentDate)"></h1>

Note I changed the name of the filter to make it explicit that it returns HTML.

For filterCurrentDateHTML, perhaps:

const m = moment(date);
const ord = m.format("Do");
return `${m.format("MMMMM")} ${ord.replace(/D/g, '')}<sup class="small">${ord.replace(/d/g, '')}</sup> ${m.format('Y')}`