Vuejs TypeError: Cannot read property 'placeholder' of undefined"

Question

I have an index template which has 2 sub-components, post-status and status-preview

I am passing a couple of props to my post-status template routes user and locale

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

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>

This is just an array of data, routes for forms, locale to translate, and a user object with some user information

No, when I render the page, the placeholder is working fine:

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

but I am getting 2 warnings:

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

My full index page:

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

All data is set:

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

What is causing this warning, when it seems to be working fine?

On this line: this.locale = locale, where does the right-hand locale variable come from? I can't see it defined anywhere... Is it a global variable declared in some other file? This is a code smell (same thing for routes and user) — blex
Yep, they're set globally, via a html page where the index template is called. — user9715413

blex blex · Accepted Answer · 2018-06-16T22:13:37

Take a look at the Vue Instance Lifecycle Diagram:

The mounted stage happens right after the first DOM render. And you're waiting for it before setting your locale. So this is what happens:

- 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

Instead of using mounted, you should probably use created, to ensure these props are set before the first render.

Vuejs TypeError: Cannot read property 'placeholder' of undefined"

1 Answers