Come implementare Datatables con Vuejs e Laravel
In questo tutorial, voglio condividere con te come implementare i datatable con vue js laravel. condividerò un semplice esempio di vue datatable nell'applicazione laravel 5.8 utilizzando vuejs-datatable npm. useremo il componente vuejs-datatable per vue datatables nell'app laravel.
cos'è il blocco display?
Datatable è la libreria più popolare in Javascript. Tabella dati fornire ricerca, ordinamento, impaginazione ecc. con un layout intuitivo. quindi vuoi anche implementare i datatable con l'app vuejs laravel, questo esempio ti aiuterà.
In questo esempio, creeremo la tabella degli utenti con l'aggiunta di alcuni record fittizi, quindi creeremo un percorso per ottenere tutti gli utenti. in vuejs codice installeremo il pacchetto vuejs-datatable e utilizzando axios get request per ottenere tutti gli utenti. Usando vuejs-datatable mostreremo in table.
Creeremo passo dopo passo l'implementazione di visto datatable utilizzando il pacchetto npm vuejs-datatable con laravel . puoi vedere la seguente schermata. Puoi anche scaricare il codice e controllare anche la demo.
Anteprima:
Passaggio 1: installa l'app Laravel Fresh
Ecco, saremo freschi Laravel 5.8 applicazione utilizzando il comando muggito, quindi apri il tuo terminale O il prompt dei comandi ed esegui il comando muggito:
composer create-project --prefer-dist laravel/laravel blog Passaggio 2: crea percorso
In questo passaggio, creeremo un percorso get e restituiremo tutti i dati degli utenti. Quindi, aggiungiamo un nuovo percorso su quel file.
route/web.php
Route::get('users','UserController@index'); Passaggio 3: crea un nuovo controller
in questo passaggio, ora abbiamo creato UserController con il metodo index, in questo metodo restituiremo tutti i dati degli utenti. Quindi creiamo il controller:
app/Http/Controllers/UserController.php
json(User::get()); } } Passaggio 4: configurazione e installazione di NPM vuejs-datatable
In questo passaggio, dobbiamo prima aggiungere l'installazione di vue js e quindi installare npm, quindi eseguiamo il comando qui sotto nel tuo progetto.
Vista installazione:
come acquistare criptovaluta di cera
php artisan preset vue Installa npm:
npm install Installa vuejs-datatable:
npm install vuejs-datatable Passaggio 5: aggiornamento dei componenti
Qui, scriveremo il codice sui componenti, quindi aggiorniamo il file e inseriamo il codice seguente:
resource/assets/js/components/ExampleComponent.vue
Laravel Vue Datatables Component Example - ItSolutionStuff.com import DatatableFactory from 'vuejs-datatable'; export default { components: { DatatableFactory }, mounted() { console.log('Component mounted.') }, data(){ return { columns: [ {label: 'id', field: 'id'}, {label: 'Name', field: 'name'}, {label: 'Email', field: 'email'} ], rows: [], page: 1, per_page: 10, } }, methods:{ getUsers: function() { axios.get('/users').then(function(response){ this.rows = response.data; }.bind(this)); } }, created: function(){ this.getUsers() } } Passaggio 6: aggiorna welcome.blade.php
All'ultimo passaggio, aggiorneremo il nostro file welcome.blade.php. in questo file useremo il file app.js e lo useremo, quindi aggiorniamo.
risorse/viste/benvenuto.blade.php
Laravel Vue Datatables Component Example - ItSolutionStuff.com Ora devi eseguire il comando seguente per aggiornare il file app.js:
npm run dev Ora puoi controllare il nostro esempio e anche controllare la demo e scaricare il codice gratuito.
Abbiamo usato il pacchetto npm vuejs-datatable, puoi ottenere maggiori informazioni da qui: vuejs-datatable .
Puoi scaricare il codice da git qui
#database #laravel #vue #vuejs
kishu inu come acquistare