Vue.js中DataTable数据更新后无法重新渲染的问题求助

问题诊断 #

核心问题出在两个关键环节：

1. v-for的key使用了index：Vue会复用DOM节点，即便数据更新，也不会重新创建表格行，导致DataTable读取的仍是旧DOM内容
2. DataTable销毁与初始化的时序错误：原代码先更新数据再销毁旧表，此时旧表已锁定DOM，无法感知后续的DOM更新

分步解决方案 #

1. 修复v-for的key绑定 #

将模板中v-for的key从index改为数据的唯一标识（比如地址的alamat_id），确保Vue能正确识别数据变化并更新DOM：

<table ref="tableUtamaAlamat" id="tableUtamaAlamat" class="display datatable-custom" style="width: 100%">
    <thead>
        <tr>
            <th>No</th>
            <th>address</th>
        </tr>
    </thead>
    <tbody>
        <!-- 用唯一ID作为key，避免Vue复用DOM -->
        <tr v-for="(row, index) in tableDataUtamaAlamat" :key="row.alamat_id">
            <td>{{ index + 1 }}</td>
            <td>{{ row.alamat }}</td>
        </tr>
    </tbody>
</table>

2. 调整DataTable销毁与初始化的时序 #

修改getAlamatByUserID方法，先销毁旧的DataTable实例，再更新数据，最后等待DOM渲染完成后初始化新表：

async getAlamatByUserID() {
    try {
        // 先销毁旧DataTable实例（如果存在），true参数会恢复表格原始状态
        const tableInstance = $(this.$refs.tableUtamaAlamat).DataTable();
        if (tableInstance) {
            tableInstance.destroy(true);
        }

        // 请求最新数据
        const payload = { user_id: this.$store.state.auth.user.user.user_id };
        const response = await this.$store.dispatch("vendor/getAlamatByUserID", payload);
        this.tableDataUtamaAlamat = response.data.data;

        // 等待Vue完成DOM渲染后，再初始化新的DataTable
        await this.$nextTick();
        this.initDataTableAlamat();
    } catch (error) {
        console.error("Error fetching alamat:", error);
    }
},

3. 保留原deleteAlamat方法（无需修改） #

原deleteAlamat中await this.getAlamatByUserID()的调用逻辑正确，确保删除操作完成后才获取最新数据。

原理说明 #

• 唯一key：让Vue精准判断哪些DOM节点需要创建/销毁，避免复用旧行导致DataTable读取无效内容
• 先销毁后更新：解除DataTable对DOM的锁定，确保Vue能自由更新表格内容
• await $nextTick()：等待Vue的异步DOM更新完成，确保初始化DataTable时，表格内容已经是最新的

内容的提问来源于stack exchange，提问作者Fajar Alam