Vue的渲染不正确表

问题描述：

我试图呈现一个表，其中每行是我的自定义组件<todo-list>的行，但由此产生的行得到渲染我的表外。为什么是这样？Vue的渲染不正确表

这里的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>',

而且我的复选框不起作用。它们看起来不错，但是当我点击它们时它们不会切换，它们只在检查表格的第一行时才会作出反应。为什么？

你是什么意思表外？请提供可以复制的代码示例。也请将此线程限制为一个问题。 – Cobaltway

我编辑了我的文章 – wenus

你有什么在你的todos数组？ – Cobaltway

答

您的表可能不会因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的渲染不正确表

相关推荐