javascript - 在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。但是创建的输入文本不是显示数据。似乎是因为类型是日期

我该如何解决这个问题？

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 .