Format date within template interpolation

I want to format the date within template {{date}}.

<div v-for="(data, index) in variable" :key="index">
{{data.date}}
</div>

where data.date is a string looks like 2014-09-09T18:30:00.000Z.

I want it in a human readable format.

I tried {{moment(data.visit_date).format("YYYY-MM-DD")}} but that throws error in console saying moment is not a function.

CodePudding user response：

Can you define a method in your component and then use it like below?

<script>
import moment from 'moment';

export default {
    methods: {
        getFormattedDate(date) {
            return moment(date).format("YYYY-MM-DD")
        }
    }
}
</script>

<div v-for="(data, index) in variable" :key="index">
{{getFormattedDate(data.date)}}
</div>