Формат даты в VueJS. Бэк-энд в фронт-энд

Question

Итак, мне нужно отформатировать дату, идущую из серверной части в интерфейсную.У меня есть таблица:

    <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>

Это правильный сегмент кода?Потому что я не могу заставить его работать по какой-то причине?

После нажатия кнопки «поиск» данные поступают из серверной части и визуализируются в таблице.Тем не менее, формат даты прямо сейчас 1554163200000. Как я могу сделать это и отформатировать в дд / мм / гггг?

Ошибка:

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

Это ошибка, когда я его строю.Когда я изменяю: row: formattedItems на элементы (значение по умолчанию), все в порядке, но дата не форматируется.

Answer 1

Вы можете использовать moment.js и вычисленные свойства

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')
      }
    })
  }
}

и в своем компоненте

<vue-good-table
:columns="columns"
:rows="formatedItems"
:paginate="true"
:lineNumbers="true">

Другой вариант - строка таблицыслот vue-good-table