javascript - 在 vue 组件中使用 moment 格式化日期

Question

我有一个带有日期类型输入字段的 Vue 组件:

<input
    type="date"
    name="start_date"
    id="start_date"
    v-model="absence.start_date"
>

在我的脚本中，我尝试格式化日期以使其正确显示:

<script>
    export default {
        data() {
            return {
                absence: {
                    start_date: null,
                }
            }
        },
        created() {
            const request = axios
                .get(`/api/absences/${this.$route.params.id}`)
                .then(response => {
                    this.absence = response.data.data;
                });
        }
    }
</script>

但是它不适用于 API 返回的格式。

如果我手动设置日期，它会以这种格式工作

start_date: '2021-01-01',

但是它会被 api 调用覆盖。我在 app.js 中安装了 moment，如何使用 moment 来格式化 api 调用返回的日期？

编辑

这是 API 响应:

{"success":true,"data":{"id":1,"start_date":"2021-07-24 00:00:00","end_date":"2021-07-25 00:00:00","notes":"Quis nisi repellendus ipsa. Eum asperiores sunt iusto exercitationem autem. Qui harum adipisci praesentium laboriosam. Fugit quasi voluptatem excepturi et non autem atque quibusdam. Sed aperiam molestias quaerat incidunt.","created_at":"2021-06-28T19:34:16.000000Z","updated_at":"2021-07-03T15:46:10.000000Z","status":1}}

Answer 1

您可以执行如下操作。工作示例代码 here

并确保安装了 moment js

<input
   type="date"
   name="start_date"
   id="start_date"
   v-model="formattedStartDate"
>

---

// Make sure moment is installed

<script>
    import moment from 'moment'

    export default {
        data() {
            return {
                absence: {
                    start_date: null,
                }
            }
        },
        computed: {
            formattedStartDate() {
                return moment(this.absence.start_date).format('yyyy-MM-DD');
            }
        },
        created() {
            const request = axios
                .get(`/api/absences/${this.$route.params.id}`)
                .then(response => {
                    this.absence = response.data.data;
                });
        }
    }
</script>