Format Date in VueJS. Back-end to front-end - date

Question

So, I need to format a date coming from the back-end into the front-end.
I have a table:
<vue-good-table
:columns="columns"
:rows="formatedItems"
:paginate="true"
:lineNumbers="true">
<script>
export default {
components: {
Datepicker
},
data(){
return {
DatePickerFormat: 'dd/MM/yyyy',
items: [],
columns: [
{
label: 'Number',
field: 'number',
type: 'String',
filterable: true,
placeholder: 'Number'
},
{
label: 'Identification number',
field: 'identNumber',
type: 'String',
filterable: true,
placeholder: 'Identification number'
},
{
label: 'Name',
field: 'name',
type: 'String',
filterable: true,
placeholder: 'Name'
},
{
label: 'Code',
field: 'code',
type: 'String',
filterable: true,
placeholder: 'Code'
},
{
label: 'From',
field: 'dateFrom',
type: 'String',
filterable: true,
placeholder: 'dd/mm/yyyy'
},
{
label: 'To',
field: 'dateTo',
type: 'String',
filterable: true,
placeholder: 'dd/mm/yyyy'
},
{
label: 'Last change',
field: 'dateChanged',
type: 'String',
filterable: true,
placeholder: 'dd/mm/yyyy'
},
{},
{}
],
fields : {
"Number": "number",
"Identification numer": "identNumber",
"Name": "name",
"Code": "code",
"From": "dateFrom",
"To": "dateTo",
"Last Change": "dateChanged"
},
json_meta: [
[{
"key": "charset",
"value": "utf-8"
}]
]
}
},
computed: {
formatedItems () {
if (!this.items || this.items.length === 0) return []
return this.rows.map(item => {
return {
...items,
dateFrom: moment(item.dateFrom).format('DD/MM/YYYY'),
dateTo: moment(item.dateTo).format('DD/MM/YYYY'),
dateChanged: moment(item.dateChanged).format('DD/MM/YYYY')
}
})
}
}
</script>
Is this the correct code segment? Because I can't get it working for some reason?
Upon hitting the "search" button the data comes from the back-end and vizualize in the table. However, the date format right now is 1554163200000. How I can make it and format it in dd/mm/yyyy?
Error:
TypeError: Cannot read property 'map' of undefined
at s.formattedItems (eoriTable.vue:231)
at xt.get (vue.esm.js:3142)
at xt.evaluate (vue.esm.js:3249)
at s.formattedItems (vue.esm.js:3507)
at s.render (eoriTable.vue?d724:1)
at s.A._render (vue.esm.js:4544)
at s.<anonymous> (vue.esm.js:2788)
at xt.get (vue.esm.js:3142)
at xt.run (vue.esm.js:3219)
at Lt (vue.esm.js:2981)
JA # vue.esm.js:1741
That's the error when I build it. When I change :rows: formattedItems to items (which was the default value) everything is fine it renders but the date is not formatted.

Answer 1

You can use moment.js and computed properties
import moment from 'moment'
....
computed: {
formatedItems () {
if (!this.items || this.items.length === 0) return []
return this.items.map(item => {
return {
...item,
dateFrom: moment(item.dateFrom).format('DD/MM/YYYY'),
dateTo: moment(item.dateTo).format('DD/MM/YYYY'),
dateChanged: moment(item.dateChanged).format('DD/MM/YYYY')
}
})
}
}
and in your component
<vue-good-table
:columns="columns"
:rows="formatedItems"
:paginate="true"
:lineNumbers="true">
Another option is using table-row slot of vue-good-table