Javascript Vuejs TypeError:无法读取属性'；占位符'；“未定义”的定义；

我有一个索引模板，它有两个子组件，

post status

和

status preview

我正在向我的

post status

template

routes

user

和

locale

<post-status
    :user="user"
    :routes="routes"
    :locale="locale">
</post-status>

发布状态.vue

<template>
    <div>
        <div class="bg-blue-lightest p-4">
            <form method="post" @submit.prevent="postStatus">
                <div class="flex">
                    <img :src="user.avatar" class="rounded-full w-8 h-8 items-end mr-3">
                    <textarea v-model="form.post" name="post" rows="5" class="w-full items-center rounded border-2 border-blue-lighter" :placeholder="locale.status.placeholder"></textarea>
                </div>
                <div class="ml-8 flex mt-4">
                    <div class="w-1/2 flex justify-start px-3">
                        <div class="mr-3">
                            <i class="text-blue-light fa fa-picture-o fa-2x"></i>
                        </div>
                        <div class="mr-3">
                            <i class="text-blue-light fa fa-bar-chart fa-2x"></i>
                        </div>
                        <div>
                            <i class="text-blue-light fa fa-map-pin fa-2x"></i>
                        </div>
                    </div>
                    <div class="w-1/2 flex justify-end">
                        <button class="bg-teal hover:bg-teal-dark text-white font-medium py-2 px-4 rounded-full">Tweet</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['user', 'routes', 'locale'],
        data() {
            return {
                form: {
                    'post': '',
                },
            }
        },
        methods: {
            postStatus: function() {
                axios
                    .post(routes.store, this.form)
                    .then(response => {
                        console.log(response)
                    })
            },
        }
    }
</script>

<style scoped>

</style>

推特
导出默认值{
道具：['user'，'routes'，'locale']，
数据（）{
返回{
表格：{
“post”：“，
},
}
},
方法：{
postStatus:function（）{
axios
.post（routes.store，this.form）
。然后（响应=>{
console.log（响应）
})
},
}
}

这只是一个数据数组、表单路由、要翻译的区域设置以及包含一些用户信息的用户对象

否，当我呈现页面时，占位符工作正常：

但我收到了两条警告：

我的完整索引页：

<template>
    <div>
        <post-status
            :user="user"
            :routes="routes"
            :locale="locale">
        </post-status>

        <status-preview v-for="status in statuses"
            :key="status.id"
            :name="status.owner.name"
            :username="status.owner.username"
            :created="status.created_at"
            :post="status.post">
        </status-preview>
    </div>
</template>


<script>

    import StatusPreview from "./status-preview.vue";
    import PostStatus from "./post-status.vue";

    export default {
        components: {
            'status-preview': StatusPreview,
            'post-status': PostStatus
        },
        data() {
            return {
                routes: [],
                statuses: [],
                locale: [],
                user: [],
                completed : false,
                progress : false,
                page: 1
            }
        },
        methods: {
            getStatuses: function() {
                let url = this.routes.index + '?page=' + this.page
                axios
                    .get(url, {
                        page: this.page
                    })
                    .then(response => {
                        if (response.data.length) {
                            this.statuses = this.statuses.concat(response.data);
                            this.progress = false;
                        } else {
                            this.progress = false;
                            this.completed = true;
                        }
                        this.page += this.page;
                    });
            },
            infiniteScroll: function() {
                if (!this.completed &&  !this.progress) {
                    this.getStatuses()
                }

            },
        },
        mounted() {
            this.routes = routes
            this.locale = locale
            this.user = user
            this.getStatuses()
            window.addEventListener('scroll', this.infiniteScroll);
        }
    }
</script>

从“/status preview.vue”导入状态预览；
从“/post status.vue”导入PostStatus；
导出默认值{
组成部分：{
“状态预览”：状态预览，
“后状态”：后状态
},
数据（）{
返回{
路线：[]，
状态：[]，
区域设置：[]，
用户：[]，
已完成：错误，
进展：错，
页码：1
}
},
方法：{
getStatuses:function（）{
让url=this.routes.index+'？page='+this.page
axios
.get（url{
佩奇：这个。佩奇
})
。然后（响应=>{
if（响应.数据.长度）{
this.statuses=this.statuses.concat（response.data）；
这个。进步=错误；
}否则{
这个。进步=错误；
this.completed=true；
}
this.page+=this.page；
});
},
无限滚动：函数（）{
如果（！this.completed&！this.progress）{
这个文件名为getStatuses（）
}
},
},
安装的（）{
this.routes=routes
this.locale=locale
this.user=user
这个文件名为getStatuses（）
window.addEventListener（'scroll'，this.infiniteScroll）；
}
}

所有数据均设置为：

当它看起来工作正常时，是什么导致了此警告？

请查看：

装载的

阶段发生在第一次DOM渲染之后。在设置
区域设置之前，您正在等待它。这就是发生的情况：

- Your template is evaluated
- `this.locale` is still equal to your initial `[]`
- You get an error in your console saying `locale.status` is undefined
- The `mounted` event handler is executed, which populates your `locale` prop
- The component re-renders, since its props have changed
- `locale` is now set, your placeholder works

您可能应该使用
created
，而不是使用
mounted
，以确保在第一次渲染之前设置这些道具。
在这一行：
this.locale=locale
，右侧的
locale
变量来自哪里？我在任何地方都看不到它的定义。。。它是在其他文件中声明的全局变量吗？这是一种代码气味（与
路由
和
用户
相同）是的，它们是通过调用索引模板的html页面全局设置的。今天，我学习了。。。创建修复了该问题。。。将标记为最佳答案。谢谢，很好！有最好的记录之一。它写得很好，即使你不习惯阅读文档，也很容易理解。你肯定应该更深入地研究它：）