0
votes

Impossible d'afficher des données sur DataTable à l'aide de Vue Axios

Je ne sais pas pourquoi mes données ne figureront pas dans mon jeu de données, mais lorsque je vérifie la console et l'outil VUE, je peux voir mes données. Quand je compile mes fichiers JS, il ne me montrera pas une erreur. Im juste à l'aide de l'option de données et utilisée $ ('# exemple'). Datatable (); code> fonction que j'ai utilisé v-for code> dans le code> pour afficher les données. Merci pour l'aide!

 Demande HTTP de la console P>

p>

users.vue p> xxx

App.js P>

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

Ajoutez votre contrôleur


3 Réponses :


1
votes

essayer d'utiliser Ce paquet comme backend

contrôleur p>

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


1 commentaires

C'est le meilleur paquet pour le jeu de données



1
votes

Ceci est le même problème exact qu'avant:

Changez-le à la variable avec les données de tableau Utilisateurs CODE> P>

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


3 commentaires

Il affiche les données maintenant monsieur mais voici ma sortie. ( imgur.com/a/stqfzgo ) Il y a un problème avec le jeu de données.


Vous utilisez une bibliothèque de plug-in jQuery Style pour travailler avec des données à l'intérieur de VUE.J. Oui, ça peut travailler. Cependant, vous devriez envisager d'utiliser un plug-in de table de style VUE.JS optimisé pour fonctionner pour VUE. Il semble que vous ayez besoin de transmettre vos données directement dans le fichier "CODE> .DataTable ({}) Plugin en option: datatables.net/reference/option/data ... Ce que vous faites en train de faire est de rendre vos données directement sur le modèle sans le transmettre dans le plugin DataTable que vous utilisez. Le plugin n'a aucune référence aux données ... C'est pourquoi vous obtenez le message qu'il n'a pas de données.


Comment puis-je faire ce monsieur? Pouvez-vous me montrer quelques codes afin que je puisse jouer avec elle? Je suis vraiment désolé. Im Nouveaux to front-end Tech Tech Tech. Que dois-je mettre dans les données objet monsieur?



1
votes

Je ne suis pas sûr que cette question a eu la bonne réponse, c'est ma prise. Le problème, dans ce cas, est que lorsque vous avez chargé le Code> DataTable CODE>, il n'a pas eu de données, car les données n'avaient pas été chargées.

Ce script ci-dessous a été plus rapide que le axios.get code> p> xxx pré>

une solution facile serait de recréer le fichier code> une fois que les données ont été chargées. P>

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

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


0 commentaires