wire:text

wire:text 是一个指令，根据组件属性或表达式动态更新元素的文本内容。与使用 Blade 的 语法不同，wire:text 更新内容而无需网络往返来重新渲染组件。

如果你熟悉 Alpine 的 x-text 指令，这两者本质上是相同的。

基本用法

以下是使用 wire:text 乐观地显示 Livewire 属性更新的示例，而无需等待网络往返。

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>

单击按钮时，$wire.likes++ 通过 wire:text 立即更新显示的计数，而 wire:click="like" 在后台将更改持久化到数据库。

此模式使 wire:text 非常适合在 Livewire 中构建乐观 UI。