vue.js - 如何修复错误 v-bind 表达式的值不能为空 Vue Js

Question

我正在尝试 vue js basic 教程，但我在 v-bind 上遇到错误。我使用 v-for 但有这样的错误:

    <template>
    <div class="todo-list">
        <todo-items 
        v-for="todo in todos" // error on here
        :title="todo.title"  // here
        :description="todo.description"/> // on here
    </div>
</template>




<script>
import TodoItems from '@/components/TodoItems.vue'
export default {
    components:{
        TodoItems
    },
    props:{
        todos:{
            required:true,
            type:Array
        }
    }

}
</script>

我不知道我的代码发生了什么，但本教程很好，不会出错。但是我的代码在 v-for 上有错误

这个错误是

Errors compiling template:

v-bind 表达式的值不能为空。在发现 “v-绑定(bind):”

有人能告诉我这个错误吗？

Answer 1

错误是因为数组中至少有一个todo对象的title字段未定义或为空。

如果您提供 todos 数组的确切结构，我将更新我的答案并提供更多详细信息。