Home Northwind

sábado, 25 de julio de 2020

Laravel & vue reload / refresh data con timer

No hay comentarios.: 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>

Ver

miércoles, 22 de julio de 2020

Instalar moment en Laravel & vue

No hay comentarios.: Publicadas por Carlos Juan a la/s 9:16 p.m. Etiquetas:

Instalando Moment


Paso 1 - Nuevo proyecto / Ejecutar proyect 
laravel new test_fechas
cd test_fechas
php artisan serve

Paso 2: Instalar Vue (en otra ventana) 
cd test_fechas
composer require laravel/ui
php artisan ui vue
Paso 3 : Instalar moment 
npm install
npm install --save vue-moment
npm run watch

Paso 3: Configurando moment
En archivo resources/js/app.js arriba de la seccion app agregamos. 
/* moment */
import moment from 'moment'
import 'moment/locale/es';
Vue.prototype.moment = moment
Vue.use(require('vue-moment'));

const app = new Vue({
    el: '#app',
});

Paso 4: Testing Moment
Abrimos el archivo resources/js/components/ExampleComponent.vue 
<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">
                        {{moment(fecha).format('dddd, Do MMMM YYYY, h:mm:ss a')}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data(){
            return {
                fecha: new Date()
            }
        },
    }
</script>

Paso 5: Desplegando el Componente 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>

Resultado final


 

Ver
Suscribirse a: Entradas (Atom)