我试图呈现一个表的行，其中每一行都是我的自定义组件<todo-list>，但结果行在我的表之外呈现。为什么会这样？
下面是DOM树的屏幕截图，显示了正在发生的事情：

的数据
我的看法：

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>

                <div class="panel-body">

                    <div id="appTest">
                        <div>@{{error}}</div>


                        <table class="table-responsive">
                            <todo-list
                                    v-for="todo in todos"
                                    v-bind:todo-obj="todo"
                                    v-bind:key="todo.id"
                                    :todo-obj.sync="todo"
                                    v-on:usun="deleteTod"
                                    ></todo-list>
                        </table>

                        <div v-if="isLogged" id="todoText">
                            <textarea v-model="todoText" cols="53" rows="5"></textarea>
                            <div id="addButton">
                                <button v-on:click="addTodo" class="btn btn-success" >Add to do</button>
                            </div>
                        </div>
                        <div v-else>
                            You have to be
                            <a href="login">Login</a>
                            to add new todos
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

字符集
这是我的组件：

Vue.component('todoList', {
props: ['todoObj'],
template: '<tr>' +
'<td><div class="round"><input id="todoObj.id" type="checkbox" v-on:click="toggle" v-model="todoObj.done" /><label for="todoObj.id"></label></div></td>' +
'<td class="textTodo">{{todoObj.description}}</td>' +
'<td><button v-on:click="deleteTodo" class="btn-xs btn-danger">delete</button></td>' +
'</tr>',

型
我的复选框也不起作用。它们看起来很好，但是当我点击它们时，它们不会切换，它们只在检查表的第一行时才有React。为什么？