无法读取未定义的属性“文本”-Vue.js答案

【问题标题】：Cannot read property 'text' of undefined - Vue.js无法读取未定义的属性“文本”-Vue.js
【发布时间】：2021-03-29 08:29:25
【问题描述】：

Todat 我被 Vue 中的循环卡住了。如果以前问过这些问题，我知道循环的基础知识并且一直在环顾四周。但他们都没有解决我的问题。

代码循环：

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

代码对象：

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

我得到的错误是：Cannot read property 'text' of undefined

希望这里有人可以帮助我。

解决方案：

:v-for: as v-for="(todo, index) in todos" 带有 :key="index"

提前致谢。

【问题讨论】：

您的代码对象错误。检查花括号
是的，我现在看到了...但是我插入了那些花括号
请用minimal reproducible example 更新您的问题以证明问题，最好是使用堆栈片段（[<>] 工具栏按钮）可运行的问题； here's how to do one 特别是 here's 如何为 Vue 做一个。

标签： javascript vue.js

【解决方案1】：

去掉 v-for 之前的冒号。

【讨论】：

【解决方案2】：

我不擅长 Vue，但我不认为你想要 :v-for 上的 :，只需要 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>

【讨论】：