在 vue 组件上编辑数据时如何显示输入类型日期的值？

Question

我的 vue 组件是这样的：

<template>
    <section>
        ...
        <form-input id="total-sold" name="total-sold" :value="products.total_sold">Total Sold</form-input>
        <form-input id="created-at" type="date" name="created-at" :value="products.created_at">Created At</form-input>
    </section>
</template>

<script>
    export default {
        props: ['products'],
        mounted() {
            console.log(this.products.total_sold) // The result : 46
            console.log(this.products.created_at) // The result : 2018-02-26 09:03:03
        },
    }
</script>

我的表单输入组件 vue 是这样的：

<template>
    <div class="form-group">
        <label :for="id" class="control-label" :class="classLabel"><slot></slot></label>
        <input :type="type" :name="name" :id="id" class="form-control" :placeholder="dataPlaceholder" :disabled="disabled" :value="value">
    </div>
</template>

<script>
    export default {
        name: "form-input",
        props: {
            'id': String,
            'name': String,
            'type': {
                type: String,
                default: 'text'
            },
            'disabled': String,
            'dataPlaceholder': {
                type: String,
                default() {
                    return this.$slots.default ? this.$slots.default[0].text : ''
                }
            },
            'value': {
                type: [String, Number]
            }
        },
        data(){
            return {
                classLabel: {'sr-only': !this.$slots.default}
            }
        }
    }
</script>

所以在我的第一个组件vue上，它会调用form-input组件vue。我制作这样的组件。所以以后那个组件可以重复使用

如果组件被执行，来自总销售量显示数据的输入文本。结果是 46。但是来自 created at 的输入文本不是显示数据。好像是因为类型是日期

我该如何解决这个问题？

Answer 1

<input type="date"> 需要YYYY-MM-DD 形式的值，请参阅MDN <input type="date">。您试图给它一个错误格式的值：2018-02-26 09:03:03，其中包含时间戳。

您将需要创建一个包装器输入组件或尝试一个支持时间时间戳的<input>，例如<input type="datetime-local">，它需要一个格式为：yyyy-MM-ddThh:mm 的值。