Question

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

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

}

Answer 1

尝试使用this package作为后端

控制器

switch state {
    case .loading:
        showProgressView()
    case .error(let error):
        showErrorAlert(error)
        fallthrough
    case .populated, .empty:
        hideProgressView()
    }

将此链接添加到CSS

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

并在jquery之后添加此链接

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

现在您的数据将以反应性方式获取

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

希望对您有帮助

Answer 2

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

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

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

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 获取数据。不过我不推荐这个选项。

使用Vue Axios无法在DataTable中显示数据

3 个答案: