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"

此指令没有修饰符。