Question

我尝试渲染表格的行，其中每一行都是我的自定义组件<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>',

我的复选框也无效。它们看起来很好，但是当我点击它们时它们不会切换，它们只会在检查表格的第一行时做出反应。为什么呢？

Answer 1

由于DOM Template Parsing Caveats，您的表格可能无法正确呈现。试试这个：

<table class="table-responsive">
  <tr
    v-for="todo in todos"
    is="todo-list"
    :todo-obj="todo"
    :key="todo.id"
    @usun="deleteTod"
  ></tr>
</table>

此外，您有todoObj两次绑定（我在上面的代码中删除了.sync）。

至于复选框问题，我不完全确定问题是什么，特别是因为你没有提供组件的代码（fiddle会很棒）。为什么你有@toggle 和 v-model？你不能只使用v-model吗？您还忘记了v-bind复选框的id属性：id="todoObj.id"（还是必要的吗？）。

Vue无法正确呈现表格

1 个答案: