Using jquery Datatables with vue.js-CodePudding

I am new to Vue and I have been trying to use Vue with jquery datatables. I am working for a project in which I need to use jquery datatables. In the following code snippets I tried to combine Vue with jquery datatables, but it doesn't work. The result is no creation of the datatable and no content. (I use Vue without npm)

I would appreciate if someone could help me.

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  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>

Javascript

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');

CodePudding user response：

You should avoid mixing Vue-managed templates and jQuery. They operate under different paradigms and your end code will likely suffer from maintainability issues down the road.

That said, your demo has a few issues:

That <template> element inside your HTML has no use, remove it.
You should give Vue some time to render the changes on this.users before calling $().DataTable(). You can do that using Vue.nextTick().

See working demo below.

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;

                Vue.nextTick(() => {
                  $('#example').DataTable();
                });
            }
        });
    }
});

app.mount('#arbeitsbereich');

<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>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<section id="arbeitsbereich">
  <h1>Test</h1>

  <table  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>