如何设计Vue递归数组项？

Question

我正在尝试实现一个递归组件，它可以作为一个递归待办事项列表来演示。在根组件中，我可以添加新的待办事项。待办事项可能有自己的副业。

Todo级

export class Todo {
    constructor(text) {
        this.id = Math.random()
        this.text = text
        this.todos = []
    }
}

根成分

<template>
    <div class="w-full px-3 py-3">
        <todo-card v-for="todo in todos" v-bind:key="todo.id"
            v-bind:todo="todo"
        ></todo-card>
        <div class="m-4 mt-8 p-4 border-t-2 border-gray-300">
            <i @click="addTodo" class='p-2 text-gray-400 fa fa-plus' title='Add Todo'></i>
        </div>
    </div>
</template>

<script>

export default {

    data: function () {
        return {
            todos: [
                new Todo('Make a call'),
                new Todo('Clean the house'),
            ]
        }
    },

    methods: {
        addTodo: function(e) {
            this.todos.push(new Todo('No name yet'))
        }        
    }
}
</script>

Todo卡组件

<template>
    <div class="m-4 px-4 py-2 border-dashed border-2 border-gray-300 bg-blue-100">
        <div class="flex justify-between">
            <span class="text-sm text-gray-400"> {{todo.text}}</span>
        </div>
        <todo-card
            v-for="todo in todo.todos"
            v-bind:key="todo.id"
            v-bind:todo="todo"
        ></todo-card>       

        <div class="m-4 pt-4">
            <i @click="addTodo" class='text-gray-400 fa fa-plus' title='Add Section'></i>
        </div>                                        
    </div>
</template>

<script>

import { Todo } from '../js/Todo'

export default {

    props: [
        'todo',
    ],

    data: function () {
        return {
            todos: this.todo.todos
        }
    },

    methods: {
        addTodo: function(e) {
            this.todos.push(new Todo('New todo')) 
        }
    },
}
</script>

我可以在根组件中使用addTodo，但是当尝试添加新的子待办事项时，我会得到

无法读取未定义的属性“_wrapper”

我尝试以其他方式修改数据属性，以确保Vue获取更改，但到目前为止已经取得了成功。有什么想法吗?我在这里可能会有什么错误，以及如何解决？

Answer 1

也许您错过了组件上的name属性？我似乎能够让它工作，一旦我添加了它(除了缺少的css)。

https://codesandbox.io/s/dazzling-paper-dil66?file=/src/components/TodoCard.vue:695-713

例如：

export default {
    name: "todo-card"
}