Vue结合jQuery DataTables失效求助：无表格及内容（非npm环境）

核心问题分析 #

• 错误使用<template>标签：非单文件组件（CDN引入Vue）场景下，挂载容器内不需要<template>包裹内容，Vue无法识别该标签，导致内部DOM无法渲染。
• DOM更新时机不匹配：Vue修改数据后异步更新DOM，赋值this.users = res后立刻初始化DataTables时，表格行还未渲染到DOM中，DataTables无法识别有效内容。
• 数据渲染冲突：同时使用Vue的v-for和DataTables的data选项填充表格，两者逻辑冲突导致异常。

修复后的代码 #

HTML部分 #

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

<section id="arbeitsbereich">
    <h1>Test</h1>
    <table class="table table-hover table-bordered" id="example">
        <thead>
            <tr>
                <th>User-ID</th>
                <th>ID</th>
                <th>Title</th>
                <th>Completed</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="user in users" :key="user.id">
                <td>{{user.userId}}</td>
                <td>{{user.id}}</td>
                <td>{{user.title}}</td>
                <td>{{user.completed}}</td>
            </tr>
        </tbody>
    </table>
</section>

<script src="vue.global.prod.min.js"></script>
<script src="arbeitsbereich-vue.js"></script>

JavaScript部分 #

const { createApp } = Vue

const app = createApp({
    data() {
        return {
            users: []
        }
    },
    mounted() {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/',
            method: 'GET',
            dataType: 'json',
            success: res => {   
                this.users = res;
                // 等待Vue完成DOM异步更新后初始化DataTables
                this.$nextTick(() => {
                    $('#example').DataTable();
                });
            }
        });
    }
});

app.mount('#arbeitsbereich');

关键调整说明 #

• 移除挂载容器内的<template>标签：Vue直接渲染容器内的DOM内容。
• 用this.$nextTick()延迟初始化：确保Vue完成表格行的DOM渲染后，再让DataTables识别并初始化表格。
• 删除DataTables配置中的data: res：避免与Vue的v-for渲染逻辑冲突，让DataTables基于已渲染的DOM结构初始化。

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