Date input box not displaying date

I have a form where the user can edit some details, the issue I'm having is that when I click the edit button and the modal appears my date input box isn't displaying the date that was saved.

Here is my code

<template>
    <div>
        <div class="modal-backdrop show"></div>
        <div class="modal" style="display: inline;">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fa fa-plus-circle"></i> Edit Details
                        </h5>
                        <button type="button" class="close" @click="close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" v-model="content.name" class="form-control">
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Date</label>
                                    <input type="date" v-model="content.date" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click="close">Cancel</button>
                        <button type="button" class="btn btn-success" @click="edit">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['detail'],
    data() {
        return {
            content: null
        }
    },
    methods: {
        close() {
            this.$emit('close');
        },
        edit(){

        }
    },
    mounted(){
        this.content = this.detail;
    }
}
</script>

jaseofspades88

4 years ago

Level 51

Are you sure you're definitely passing something to your component? Be careful if you're passing json because sometimes when parsing json, Vue doesn't handle props too well. Consider adding a type to your props if you're accepting an array or a string or an object.

You can use object syntax for this...

Instead of this...

props: ['detail'],

You can use this...

props: {
    detail: {
	    type: Array,
		required: true,
	}
}

At least this will confirm what you're passing to the component is correct. Types that can be used are Array, String, Boolean, Object, Function and Promise.

cerberuspup

4 years ago

Level 1

@lancashireman I'm passing an object through and when I check my vue dev tools it is there

jaseofspades88

4 years ago

Level 51

Within your data object, you should be able to assign detail directly. Like this:

    data() {
        return {
            content: this.detail
        }
    },

Please or to participate in this conversation.