Question

我的模板是：

        <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中空位。哪里出错了？

Answer 1

首先，虽然您可以在<table>标记上实例化您的Vue应用，但通常您只需要single Vue instance on the whole page，因此最好将Vue实例设置为一个主要的div / body标签。

其次，我认为你的代码可以工作（我不知道你的交付对象应该是什么样子......），但你的fillTable()方法可能没有被调用，即交付是空的。

我根据您的代码制作了这个工作示例：http://jsfiddle.net/wmh29mds/

Answer 2

生活比看上去容易我在这个指令中犯了一个错误：

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

我忘记了单个名字到班级名称，下一个版本正在运作：

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

Vue.js不会渲染表格

2 个答案: