Cannot read property 'text' of undefined - Vue.js

Question

Todat I am stuck with looping in Vue. I know the basics of loops and been looking around if these question are asked before. But none of them solved my problem.

Code loop:

<ul>
    <li :v-for="todo in todos">
       {{ todo.text }}
    </li>
</ul>

Code object:

todos: [
   { text: "Subscibe to Renatello.com newsletter", done: true },
   { text: "Learn Vue", done: false },
   { text: "Build awesome projects", done: false }
]

The error I get is: Cannot read property 'text' of undefined

Hopefully there is someone out here which can help me out.

SOLUTION:

The :v-for: as v-for="(todo, index) in todos" with an :key="index"

Thanks in advance.

Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button); here's how to do one and specifically, here's how to do one for Vue. — T.J. Crowder
– T.J. Crowder, Commented Mar 29, 2021 at 8:35

Martin Z · Accepted Answer · 2021-03-29 08:41:57Z

2

Remove the colon before the v-for.

answered Mar 29, 2021 at 8:41

Martin Z

2282 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2021-03-29 08:43:00Z

I'm not strong on Vue, but I don't think you want the : on :v-for, just v-for:

const app = new Vue({
    el: '#app',
    data: {
        todos: [
            {
                text: "Subscibe to Renatello.com newsletter",
                done: true
            },
            {
                text: "Learn Vue",
                done: false
            },
            {
                text: "Build awesome projects",
                done: false
            }
        ]
    }
})

setTimeout(() => {
    app.todos = [
        ...app.todos,
        {
            text: "more",
            done: false
        }
    ];
}, 1000);

<div id="app">
    <ul>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Collectives™ on Stack Overflow

Cannot read property 'text' of undefined - Vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related