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

我该如何解决这个问题？