My vue component like this :
<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>
My form-input component vue like this :
<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>
So on the my first component vue, it will call form-input component vue. I make the component like that. So later that component can be used repeatedly
If the component executed, the input text from total sold display data. The result is 46. But the input text from created at is not display data. Seems it because the type is date
How can I solve this problem?
