Cant display data in datatable using vue axios

Question

I dont know why my data wont show in my datatable but when I check the console and the vue tool i can see my data. When I compile my js files it wont show me an error. Im just using the datatable and used $('#example').DataTable(); function then i used v-for in the <td> for showing the data. Thanks for the help!

Users.vue

   <table id="example" 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.data" :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>


<script>
    export default {
       data() {
    return {
      editmode: false,
      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() {
    $('#example').DataTable();
} );
</script>

app.js


require('./bootstrap');

import Vue from 'vue'
import { Form, HasError, AlertError } from 'vform'
import VueRouter from 'vue-router'


window.Vue = require('vue');
window.Form = Form;
Vue.use(VueRouter)

const routes = [
    { path: '/users', component: require('./components/Users.vue').default },
    // { path: '*', component: require('./components/NotFound.vue').default}
  ]

const router = new VueRouter({
    mode: 'history',
    routes
  })


  Vue.component('users', require('./components/Users.vue').default);


const app = new Vue({
    el: '#app',
    router
});

api.php

Route::apiResource('user', 'API\UserController');

UserController.php

<?php

namespace App\Http\Controllers\API;

use App\igration;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return User::all();
    }

}

add your controller

sid heart
– sid heart

2019-08-03 09:32:21 +00:00
Commented Aug 3, 2019 at 9:32 — sid heart
– sid heart, Commented Aug 3, 2019 at 9:32

jremi · Accepted Answer · 2019-08-05 03:54:26Z

1

This is the same exact issue as before:

Change it to the variable with the array data users

<tr v-for="user in users" :key="user.id">

answered Aug 5, 2019 at 3:54

jremi

2,9895 gold badges29 silver badges37 bronze badges

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

3 Comments

draw134 Over a year ago

It displays the data now sir but here is my output. (imgur.com/a/STQfZgo) There is a problem with the datatable.

jremi Over a year ago

You are using a jQuery style plugin library for working with data inside Vue.js. Yes, it can work. However, you should consider using a Vue.js style table plugin that is optimized to work for Vue. It appears that you need to pass in your data directly into the .dataTable( {}) plugin as an option: datatables.net/reference/option/data ... What you are currently doing is just rendering your data directly to the template without passing it into the dataTable plugin you are using. The plugin has no reference to the data ... that is why you are getting the message that it has no data.

draw134 Over a year ago

How can I do that sir? Can you show me some few codes so that I can play with it? Im really sorry. Im new to front end tech tools. What should I put in the data object sir?

sid heart · Accepted Answer · 2019-08-03 09:58:30Z

try to use this package as backend

Controller

public function index()
    {
        $query = User::latest()->get(); //Query your usersdata

        $users = UserResource::collection($query); //This is optional if you want to filter your data

        return Datatables::of($users)

        ->make();
    }

add this link to css

<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

and add this link after jquery

<script src="//code.jquery.com/jquery.js"></script>
 <!-- DataTables -->
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>

now your data will be fetch as reactive

<template>
<table class="table table-bordered" id="users-table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>Updated At</th>
            </tr>
        </thead>
    </table>
</template>

<script>
export default {
  mounted(){
$(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.data') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' }
        ]
    });
});
  }

  //or
  $(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.data') !!}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' }
        ]
    });
});

}
</script>

Hope this help you

AntonyMN · Accepted Answer · 2021-03-22 18:53:05Z

I am not sure if this question got the right answer, this is my take. The problem, in this case, is that when you loaded the datatable, it did not have data since by then, data had not been loaded.

This script below ran faster than the axios.get

$(document).ready(function() {
  $('#example').DataTable();
});

One easy fix would be to recreate the datatable once data has been loaded.

loadUsers() {
   axios.get("api/users").then(r=>{
   this.users = r.data.users

   $('#example').dataTable({
     "destroy": true
   });
 })
}

Once the data has been loaded, the new data table will load the data.

You might want to implement a setTimeout as a workaround, to delay the data table before it's loaded, giving the Axios time to fetch data from the API. I would not recommend this option though.

Collectives™ on Stack Overflow

Cant display data in datatable using vue axios

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related