Vuejs TypeError：无法读取属性＆＃39;占位符＆＃39;未定义＆＃34;

Question

我有一个索引模板，它有2个子组件，post-status和status-preview

我将一些道具传递给我的post-status模板routes user和locale

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

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

这只是一个数据数组，表单路由，要翻译的语言环境以及带有一些用户信息的用户对象

不，当我渲染页面时，占位符工作正常：

https://i.imgur.com/GfGTPeP.png

但我收到2条警告：

https://i.imgur.com/xvb1nLB.png

我的完整索引页：

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

设置所有数据：

https://i.imgur.com/ztpEQCr.png https://i.imgur.com/pSStYoK.png

什么导致此警告，当它似乎工作正常？

Answer 1

查看Vue Instance Lifecycle Diagram：

mounted阶段在第一个DOM渲染之后发生。在设置locale之前，您正在等待它。所以这就是：

- 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

您应该使用mounted，而不是使用created，以确保在第一次渲染之前设置这些道具。