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不会呈现表

回答

相关问题