Vue.js不'；t渲染表

我的模板是：

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

但在脚本开始渲染到tbody之后，我在HTML中只有一个空位置。 我哪里弄错了？

首先，尽管您可以在

标记上实例化您的Vue应用程序，但通常您只需要一个，因此最好在一个主div/body标记上创建Vue实例

其次，我认为您的代码可以工作（我不知道交付对象应该是什么样子…），但是您的

fillTable（）

方法可能没有被调用，即交付是空的

---

我根据您的代码制作了这个工作示例：

生活比看起来容易。
我在这个指令中犯了一个错误：

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

我刚刚忘记了类名称中的单个配额，下一个变量正在工作：

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

---

是否确实调用了

fillTable（）

方法，即

deliveries

实际包含一些记录？您是否在JS控制台中看到任何错误？可能

d

不是您所期望的。您是否检查了传递的

d

是什么？是的，所有传递都有大量数据，并且该数据正确地传递给了d变量（我在console.log中看到）

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