Cant display data in datatable using vue axios

问题:

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();
    }

}

回答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">

回答2:

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