Home Northwind

sábado, 25 de julio de 2020

Laravel & vue reload / refresh data con timer

Publicadas por Carlos Juan a la/s 8:06 p.m. Etiquetas:
No se si es la solucion correcta, pero asi lo solucione yo. Paso 1 - Nuevo proyecto / Ejecutar proyect 
laravel new test_tick
cd test_tick
php artisan serve

Paso 2: Instalar Vue (en otra ventana) 
cd test_tick
composer require laravel/ui
php artisan ui vue

Paso 3 : Instalar moment 
npm install
npm run watch

Paso 4 : Desarollando el tick
Abrimos el archivo resources/js/components/ExampleComponent.vue
Vamos hacer el metodo llenar se ejecute cada 5 segundos.
<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>
 
                    <div class="card-body">
                        Fecha: {{fecha}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
    export default {
        data(){
            return {
                fecha: new Date(),
            }
        },
        mounted() {
            console.log('Component mounted.')
            this.llenar();
        },//timer
        beforeDestroy () {
            clearInterval(this.intervalid1)
        },
        created() {
            setInterval(this.llenar, 30000);
        },//fin timer
         methods:{
            llenar(){
                this.fecha= new Date();
                console.log (this.fecha);
            },
        }
    }
</script>
 

Paso 5 : Habilitando VUE en Laravel Para este ejemplo vamos a reemplazar la vista resources/views/welcome.blade.php con el siguiente contenido. 
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <title>Laravel</title>
        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
 
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
    </body>
</html>

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)