Vue, дочерний компонент говорит, что реквизиты не определены при изменении вида

Question

Я делаю пример приложения Vue. Я реализовал форму, которая будет использоваться как для операций создания, так и для обновления.

<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>

Когда родительский компонент делает router.push('/another-route');, дочерний компонент выдает ошибку, что модель поста не определена.

Родительский компонент имеет следующий вид:

<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>

Я пытался добавить некоторые реквизиты по умолчанию, но это не работает.

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

    }
}

Кто-нибудь имеет представление о том, как я могу это исправить?

Answer 1

Установить default значения следующим образом:

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

См. Ссылку