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 ponent 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 mented 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-piler/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/ponents/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)

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 ponent 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 mented 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-piler/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/ponents/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)

• javascript
• vue.js

• Try to pile again. – Jesus Erwin Suarez Commented Jul 7, 2018 at 23:59
• Sorry, I'm a newbie, what do you mean by that? – Bobby Commented Jul 8, 2018 at 0:31
• Close the present working tab on the browser.Restart your development server, and you get rid of the error. – Tecno krates Commented Jun 4, 2020 at 8:15

3 Answers 3

Your code just works fine ,make sure when you unment your mented 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.

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.

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