Vue, child component says that props are undefined on view change

Question

I'm doing a sample Vue app. I implemented a form that will be used for both create and update operations.

<template>
    <div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Post Title:</label>
                    <input type="text" class="form-control" v-model="post.title">
                    <div v-if="errors['post.title']" class="invalid-feedback">
                        {{errors['post.title'].join(' ')}}
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Post Body:</label>
                    <textarea class="form-control" v-model="post.body" rows="5"></textarea>
                    <div v-if="errors['post.body']" class="invalid-feedback">
                        {{errors['post.body'].join(' ')}}
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div class="form-group">
            <button class="btn btn-primary">Create</button>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['post', 'errors']
    }
</script>

When the parent component, does a router.push('/another-route'); the child component throws an error that the post model is undefined.

The parent component is the following:

<template>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">
                    Create Post
                </div>
                <div class="card-body">
                    <form @submit.prevent="handlePostCreate">
                        <PostForm v-bind:post="post" v-bind:errors="errors"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Post from './../../models/Post';
    import PostForm from './../../components/forms/PostForm';
    import PostService from './../../services/PostService';
    export default {
        data() {
            return {
                post: new Post(),
                postService: new PostService(),
                errors: {}
            }
        },
        methods: {
            handlePostCreate() {
                this.postService.store(this.post)
                    .then(res => {
                        router.push('/posts');
                    })
                    .catch(err => {
                        this.errors = err.errors;
                    });
            }
        },
        components: {
            PostForm
        }
    }
</script>

I tried to add some default props but It does not work.

props: {
    post: {
        title: '',
        'body': ''
    }, 
    errors: {

    }
}

Does anyone have some idea of how I can fix this?

Sajib Khan Sajib Khan · Accepted Answer · 2019-04-08T08:21:26

Set default values by following:

// PostForm
props: {
  post: {
    type: Object,
    default: () => ({}),
  }
  errors: {
    type: Object,
    default: () => ({}),
  }
}

See Reference

Vue, child component says that props are undefined on view change

1 Answers