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>',

而且我的複選框不起作用。它們看起來不錯，但是當我點擊它們時它們不會切換，它們只在檢查表格的第一行時纔會作出反應。爲什麼？

來源

2017-07-24 wenus

你是什麼意思表外？請提供可以複製的代碼示例。也請將此線程限制爲一個問題。 – 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"（是必要的呢？）。

來源

2017-07-24 12:09:37

Vue的渲染不正確表

回答

相關問題