Vue.js不會呈現表

我的模板是：Vue.js不會呈現表

 <tbody id="deliveries-table"> 
     <tr v-for="item in deliveries"> 
      <td class="table-view-item__col"></td> 
      <td class="table-view-item__col" v-bind:class="{ table-view-item__col--extra-status: item.exclamation }"></td> 
      <td class="table-view-item__col">{{item.number}}</td> 
      <td class="table-view-item__col"><a href="{{item.sender_profile_url}}">{{item.sender_full_name}}</a></td> 
      <td class="table-view-item__col" v-if="item.courier_profile_url"><a href="{{item.courier_profile_url}}">{{item.courier_full_name}}</a></td> 
      <td class="table-view-item__col" v-if="item.delivery_provider_url"><a href="{{item.delivery_provider_url}}">{{item.delivery_provider_name}}</a></td> 
      <td class="table-view-item__col"> 
       <span style="font-weight: 900">{{item.get_status_display}}</span><br> 
       <span>{{item.date_state_updated}}</span> 
      </td> 
      </tr> 
     </tbody>

我的渲染大量的準備數據的JavaScript代碼：

var monitorActiveDeliveries = new ActiveDeliveries(); 
monitorActiveDeliveries.fillTable(allDeliveries); 
class ActiveDeliveries { 
    constructor() { 
    this.table = new Vue({ 
     el: '#deliveries-table', 
     data: { 
     deliveries: [] 
     } 
    }); 
    } 
    fillTable (d) { 
    this.table.deliveries = d; 
    } 
}

但劇本之後開始的任何渲染成TBODY，我只是在HTML空的地方。我哪裏錯了？

來源

2017-06-29 ivan

你確定你的'fillTable（）'方法被調用， ie'deliveries'實際上包含一些記錄？你看到JS控制檯中的任何錯誤？ – emanek

也許'd'不是你所期望的。你檢查了什麼是'd'通過？ – dfsq

是的，allDeliveries有很多數據，並且這些數據正確傳遞給d變量（我在console.log中看到它） – ivan

首先，儘管你可以實例在<table>標記您的Vue公司的應用程序，通常你只想要一個single Vue instance on the whole page，所以它可能是更明智的一個主DIV/body標籤的Vue的實例。第二，我認爲你的代碼可以工作（我不知道你的交付對象應該看起來像什麼......），但是你的fillTable()方法可能不會被調用，即交付是空的。

我會根據您的代碼，該工作示例：http://jsfiddle.net/wmh29mds/

來源

2017-06-29 13:47:11 emanek

生活是很容易，它似乎。
我得到了一個錯誤，這個指令：

v-bind:class="{ table-view-item__col--extra-status: item.exclamation }"

我只是忘了單一的配額爲類名，下一個變體工作：

v-bind:class="{ 'table-view-item__col--extra-status': item.exclamation }"

來源

2017-06-30 07:49:36 ivan

Vue.js不會呈現表

回答

相關問題