Vue error: TypeError: Cannot read property 'title' of undefined at Proxy.render

Question

I found a few questions like mine, but none were clear enough to solve my specific problem.

I have this code in my Test.Vue component that is imported into my App.vue file.

P.S. Everything was working perfectly fine yesterday when I was working on this, I wasn't getting any error at all doing this. I just closed my laptop and today opened it up again to work on it and started getting this error when I refreshed my page.

<template>
    <div class = "test">
        <input type="text" v-model="title"> <br/>
        <h1>{{title}}</h1>
        <p>{{user.lastName}}</p>
        <p v-if="showName">{{user.firstName}}</p>
        <p v-else>Nada</p>

        <!-- <ul>
            <li v-for="item in items>{{item.title}}</li>
        </ul> -->

    </div>
</template>

<script>
export default {
    name: 'test',
    data() {
        return{
            title: 'Hello World',
            user: {
                firstName:'John',
                lastName:'Doe'
            },
            showName: true,

            // items: [
            //  {title: 'Item One'},
            //  {title: 'Item Two'},
            //  {title: 'Item Three'}
            // ]
        }
    }
}
</script>
<style scoped> 
</style>

With what I have in my code -- having commented the lines that create in my <template> and the items:[] in , everything

vue.esm.js?efeb:1741 TypeError: Cannot read property 'title' of undefined at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-dc87507c","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/Test.vue (0.b8f1eab6988182beecb6.hot-update.js:7), :37:59) at VueComponent.Vue._render (vue.esm.js?efeb:4544) at VueComponent.updateComponent (vue.esm.js?efeb:2788) at Watcher.get (vue.esm.js?efeb:3142) at Watcher.run (vue.esm.js?efeb:3219) at flushSchedulerQueue (vue.esm.js?efeb:2981) at Array.eval (vue.esm.js?efeb:1837) at flushCallbacks (vue.esm.js?efeb:1758)

Answer 1

Your code just works fine ,make sure when you uncomment your commented code you put quotes(") after items

<li v-for="item in items">{{item.title}}</li>

That's all it should works.

Here's the working fiddle

If you are still getting it, just close the serve and start again.

I hope it helps.

Answer 2

You are missing an end quote here:

<li v-for="item in items>{{item.title}}</li>

You should add a quote after items. It will work then.

Answer 3

TypeError has told you about all things so clearly. first, you should know who is the Proxy.render, when it load ,what is happening, OK ? and then ,the property 'title' of undefined at this render, it means when this page rendering ,the instance, maybe it be called 'vm.$el', can't find this property, but it need this property, so you need initialize this property correctly. example: if you write this in template:

<li v-for="item in items" :key="item">{{item[a.b].title}}</li>

and you defined data like this:

a:{},


items: [{title: 'Item One'}],

you will get :

enter image description here

because when it rendering ,can't find a.b