저는 Vue에 처음 와서 Vue를 jquery datables와 함께 사용하려고 합니다.저는 jquery datable을 사용해야 하는 프로젝트에서 일하고 있습니다.다음 코드 조각에서 Vue를 jquery datables와 결합하려고 했지만 작동하지 않습니다.그 결과 데이터 테이블이 생성되지 않고 컨텐츠도 생성되지 않습니다(npm 없이 Vue를 사용합니다).
누군가 도와주면 고맙겠어요.
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">
<template>
<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>
</template>
</section>
<!--Version 3.2.36 (https://cdnjs.com/libraries/vue)--> <script src="vue.global.prod.min.js"></script>
<script src="arbeitsbereich-vue.js"></script> 자바스크립트
const { createApp } = Vue
const app = createApp({
data() {
return {
users:[]
}
},
mounted() {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/',
method: 'GET',
dataType: 'json',
contentType: 'application/json',
success: res => {
this.users = res;
$('#example').DataTable({
data: res
});
}
});
} });
app.mount('#arbeitsbereich');