Datatable display problem using vue-axios and laravel

Question

Im using jQuery datatables for displaying my data in my users component in Vue.js, but when I run my code it displays the data but it has some text that says "No data found". Can someone help me with this? I really don't have any idea because I'm new in this Frontend tools.

Users.vue:

<template>
  <table id="table" class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Email</th>
        <th>Type</th>
        <th>Created</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
        <td>{{ user.type }}</td>
        <td>{{ user.created_at }}</td>
      </tr>
    </tbody>
  </table>
</template>


<script>
export default {
  data() {
    return {
      users: [],
      form: new Form({
        id: "",
        name: "",
        email: "",
        password: "",
        type: ""
      })
    };
  },
  methods: {
    loadUsers() {
      axios.get("api/user").then(({ data }) => (this.users = data));
    }
  },
  created() {
    console.log("Component mounted.");
    this.loadUsers();
  }
};

$(document).ready(function() {
  $("#table").DataTable({});
});
</script>

tony19 · Accepted Answer · 2022-07-16 00:53:29Z

1

Probably, you should init your widget DataTable after receiving data from api, more precisely in then method.

axios.get("api/user").then(({ data }) => {
  this.users = data;
  this.$nextTick(() => {
     $("#table").DataTable({});
  });
});

Explanation about Vue.$nextTick:

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update. This is the same as the global Vue.nextTick, except that the callback’s this context is automatically bound to the instance calling this method.

edited Jul 16, 2022 at 0:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 5, 2019 at 5:00

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

draw134 Over a year ago

how could I do that sir? can you show me some few codes so that I can play with it?

Andrew Vasylchuk Over a year ago

Oh ,yea, and don't forget to wait for DOM changes through this.$nextTick;

draw134 Over a year ago

It works sir but it needs to be reloaded in order to work and it throws me an error Vue warn]: Error in nextTick: "TypeError: $(...).DataTable is not a function" then after I reload its gone. then when I click to other component then go back, it shows again the error

Andrew Vasylchuk Over a year ago

Can you provide how you include this widget into the project?

Andrew Vasylchuk Over a year ago

Make sure that your widget is loaded in moment of initialization. Then reply.

|

AIR ALPHA · Accepted Answer · 2020-01-26 14:46:27Z

0

axios.get("api/user").then(({ data }) => {
  this.users = data;
  $(function() {
     $("#table").DataTable({});
  });
});

answered Jan 26, 2020 at 14:46

AIR ALPHA

444 bronze badges

Collectives™ on Stack Overflow

Datatable display problem using vue-axios and laravel

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related