Vue.js-数据表：显示数据，但第一行显示渲染数据后的消息“表中没有可用数据”

Question

我在laravel项目中的Vue.js中使用数据表。数据已重新加载到数据表中。但是问题是加载数据表后检索数据。因为，在数据表的第一行中显示“表中没有可用数据”！我该如何解决这个问题。

<table class="table table-hover" id="data-table">
                <thead style="background:#eaeaea;">
                  <tr>
                    <th>Name</th>
                    <th>No of items</th>
                    <th>Status</th>
                    <th>Created_at</th>
                    <th><i class="fas fa-arrow-circle-down"></i></th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(categories, key) in tableData" :key="key">
                    <td>{{ categories.name_categories }}</td>
                    <td>0</td>
                    <td>
                      <label v-if="categories.status == 'y'" class="badge mr-2 pull-left badge-success">Active</label>
                      <label v-if="categories.status == 'n'" class="badge mr-2 pull-left badge-danger">Disabled</label>
                    </td>
                    <td>{{ categories.created_at }}</td>
                    <td>
                      <a href="#" @click="editModal(categories)" class="btn btn-sm btn-warning"> <i class="fas fa-pen"></i></a>
                      <a href="#" @click="deleteUser(categories.id)" class="btn btn-sm btn-danger"> <i class="fas fa-trash"></i></a>
                    </td>
                  </tr>
                </tbody>
              </table>


loadCategories(){
        var app = this;
        axios.get('/api/categories',{
            params: {
              company : app.selectedOutlet
            }
        })
            .then(function (resp) {
                app.tableData = resp.data.categories
                $( () => { $('#data-table').DataTable({
                      "retrieve": true,
                      "order": [[ 0, "desc" ]],
                      "language": {
                          "paginate": {
                              "previous": "<i class='fas fa-arrow-left'></i>",
                              "next": "<i class='fas fa-arrow-right'></i>"
                          },
                          "lengthMenu": 'Display <select class="custom-select">' +
                              '<option value="10">10</option>' +
                              '<option value="20">20</option>' +
                              '<option value="30">30</option>' +
                              '<option value="40">40</option>' +
                              '<option value="50">50</option>' +
                              '<option value="-1">All</option>' +
                              '</select>',
                          "info": "Showing page <b class='text-info'> _START_ </b> to <b class='text-info'> _END_ </b>  of <b class='text-info'> _TOTAL_ </b> entries"
                      }
                  })
                })
            })
            .catch(function (resp) {
                console.log(resp);
            })
      }