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。

参考

wire:text="expression"

该指令没有修饰符。