wire:text

wire:text es una directiva que actualiza dinámicamente el contenido de texto de un elemento basándose en una propiedad o expresión del componente. A diferencia de la sintaxis {{ }} de Blade, wire:text actualiza el contenido sin necesidad de que la red vuelva a renderizar el componente.

Si está familiarizado con la directiva x-text de Alpine, ambas son esencialmente iguales.

Uso básico

He aquí un ejemplo de uso de wire:text para mostrar de forma optimista las actualizaciones de una propiedad Livewire sin esperar un viaje de ida y vuelta por la red

use Livewire\Component;
use App\Models\Post;

class ShowPost extends Component
{
    public Post $post;

    public $likes;

    public function mount()
    {
        $this->likes = $this->post->like_count;
    }

    public function like()
    {
        $this->post->like();

        $this->likes = $this->post->fresh()->like_count;
    }
}

<div>
    <button x-on:click="$wire.likes++" wire:click="like">❤️ Like</button>

    Likes: <span wire:text="likes"></span>
</div>

Cuando se pulsa el botón, $wire.likes++ actualiza inmediatamente el recuento mostrado a través de wire:text, mientras que wire:click="like" persiste el cambio en la base de datos en segundo plano.

Este patrón hace que wire:text sea perfecto para construir interfaces de usuario optimistas en Livewire.