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

我该如何解决这个问题？

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.

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

How can I display value of input type date when edit data on vue component?

javascript

vue.js

vuejs2

vue-component

vuex