1. Principal
  3. PHP y otros
  5. Livewire - Laravel8 - Tutoriales y principales elementos.

Livewire - Laravel8 - Tutoriales y principales elementos.

Más
1 año 11 meses antes - 1 año 11 meses antes #39 por luispindola
Livewire - Laravel8 - Tutoriales y principales elementos. Publicado por luispindola
laravel-livewire.com/



github.com/infodp/crud_laravel8_livewire





Instrucciones Livewire:

Artisan:
Crear Componente:
php artisan make:livewire ShowPostsComponent

Con folders:
php artisan make:livewire post.show

Vistas:
Renderizar un componente en una vista:
@livewire('show-posts')

Pasando variables:
@livewire('show-posts',)

Los cuales se asignan a las propiedades públicas:
class ShowPost extends Component
{
    public $post;
...
}

Para asociar una variable a un componente HTML: usa wire:model
<select class="form-control" 
name="user_inscripciones_id" 
wire:model="user_inscripciones_id">


Crear una ruta directo a un componente:
Route::get('/post', ShowPosts::class);

Por default livewire renderizará en {{ $slot }} de la plantilla principal.
layout.base.blade.php:
<head>
    @livewireStyles
</head>
<body>
    {{ $slot }}
 
    @livewireScripts
</body>
class ShowPosts extends Component
{
    ...
    public function render()
    {
        return view('livewire.show-posts')
            ->layout('layouts.base');
    }
}

En caso de que no se utilize el $slot:
public function render()
{
    return view('livewire.show-posts')
        ->layout('layouts.base')
        ->slot('main');
}


Enviar datos desde las vistas:
<input class="form-control" 
                      name="buscar" 
                      placeholder="Filtrar por:..."
                      wire:model="buscar">

Para esperar un tiempo antes de enviar el request:
wire:model.debounce.500ms

Para enviar el request hasta que se hace clik en otro elemento html
wire:model.lazy="message"

Agrupa los request hasta el siguiente network request:
<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>

Acciones:
<button wire:click="doSomething">Do Something</button>
<input wire:keydown.enter="doSomething">
<form wire:submit.prevent="save">
    ...
 
    <button>Save</button>
</form>

Pasando parámetros:
<button wire:click="addTodo({{ $todo->id }}, '{{ $todo->name }}')">
    Add Todo
</button>


Hacer que livewire nno renderize una seccion:
<div class="mb-3" wire:ignore>
            <select class="form-control select2" 
                name="asign_id" 
                id="asign_id" 
                wire:model="asign_id">

Scripts:
document.addEventListener('livewire:load',function(){
        $('.select2').select2();      <---------------cargar un script cuando cage elementos wire

        $('.select2').on('change', function(){         <---------------Pasar un dato a wire por script.
          /*alert(this.value)*/
          @this.set('asignatura_id',this.value)
        })
      })
Última Edición: 1 año 11 meses antes por luispindola.

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

  1. Principal
  3. PHP y otros
  5. Livewire - Laravel8 - Tutoriales y principales elementos.
Tiempo de carga de la página: 0.103 segundos