使用慣性和 vue3 的數據表空單元格

Question

我在 Vue3 中使用 Laravel Inertia。 我使用包https://datatables.net/blog/2022-06-22-vue作為數據表。 問題是我將數據從控制器傳遞給 vue 作為道具，但它無法正確呈現。 我有空單元格，但它有正確的數據計數。

當我轉到組件時收到此警報

DataTables warning: table id=DataTables_Table_17 - 
Requested unknown parameter '0' for row 0, column 0. 
For more information about this error, please see http://datatables.net/tn/4

這是我的數據表組件代碼

          <DataTable :data="tenants" class="display">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Database</th>
                    <th>Email</th>
                    <th>Actions</th>
                </tr>
            </thead>
          </DataTable>

這是我的 vue devtools 道具詳細信息

我剛剛找到了一種通過做來部分工作的方法

          <DataTable class="display">
            <thead>
              <tr>
                <th>Id</th>
                <th>Database</th>
                <th>Email</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="tenant in tenants" :key="tenant.id">
                <td>{{ tenant.id }}</td>
                <td>{{ tenant.tenancy_db_name }}</td>
                <td>{{ tenant.email }}</td>
                <td>
                  <button class="btn btn-outline-info">Update</button>
                  &emsp;
                  <button @click="deleteTenant(tenant.id)" class="btn btn-outline-danger">Delete</button>
                </td>
              </tr>
            </tbody>
          </DataTable>

但問題是當我在表上添加或刪除時，我需要切換到其他組件並返回以便表更新。

來自控制器的代碼

    public function index(){
        $tenants = Tenant::all()->toArray();

        return Inertia::render('Tenants/Index',[
            'tenants' => $tenants
        ]);
    }

然后在我的組件中

defineProps({
  tenants: Array,
});

提前致謝！

Answer 1

也許你不能根據你發布的道具循環Reactive數組。 同樣基於此鏈接，它需要是某種普通數組。
您可能需要將 props 從反應式數組轉換為普通數組。

const data = [
  [1, 2],
  [3, 4],
];

Answer 2

1. 如果數據結構是一個對象數組，那么根據文檔，我們需要使用columns來填充對象屬性。
2. 文檔中還提到了使用反應性數據，其中包將自動反映對數據所做的更改。

因此，如果您可以嘗試以下操作，它可能會有所幫助-

<DataTable
    class="display"
    :columns="columns"
    :data="tenants"
    :options="{ select: true }"
    ref="table"
/>

根據租戶數組的列數據可以是 -

const columns = [
  { data: 'id' },
  { data: 'tenancy_db_name' },
  { data: 'email' },
];