无法使用vue axios在数据表中显示数据

Question

我不知道为什么我的数据不会显示在我的数据表中，但是当我检查控制台和 vue 工具时，我可以看到我的数据。当我编译我的 js 文件时，它不会显示错误。我只是使用数据表并使用$('#example').DataTable(); 函数然后我在<td> 中使用v-for 来显示数据。谢谢您的帮助！

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

用户控制器.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();
    }

}

Answer 1

这与之前的问题完全相同：

将其更改为数组数据users的变量

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

Answer 2

尝试使用this package 作为后端

控制器

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

将此链接添加到 css

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

并在 jquery 之后添加此链接

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

现在您的数据将作为响应式获取

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

希望对你有帮助

Answer 3

我不确定这个问题是否得到了正确答案，这是我的看法。在这种情况下，问题是当您加载datatable 时，它没有数据，因为那时还没有加载数据。

下面的这个脚本比axios.get跑得快

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

一个简单的解决方法是在加载数据后重新创建datatable。

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

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

加载数据后，新数据表将加载数据。

您可能希望实现 setTimeout 作为一种解决方法，以在加载数据表之前延迟数据表，从而让 Axios 有时间从 API 获取数据。不过我不推荐这个选项。