使用 Alpine $wire 设置 Livewire V3 属性 | x-on:click="$wire.title = '标题'"

Question

我使用 Livewire v3 一段时间并且经常使用...

<button x-on:click="$wire.set('title', 'A New Title')">

...直接从 Alpine 设置 Livewire 属性。这一切都按预期进行。

文档显示

$wire.title=''

作为执行此操作的另一种方法。我喜欢这个 API，但它对我不起作用。我是否误解了文档？

参考：https://livewire.laravel.com/docs/alpine#mutating-livewire-properties

Answer 1

语法 $wire.set('property', 'value') 触发对后端的调用并导致视图的渲染。
可以等同于 wire:model.live="property"

语法 $wire.variable = 'value' 在浏览器端本地设置属性值，需要显式调用来刷新后端（$refresh 可以达到相同的结果）
可以等同于 wire:model="property"

例如：

<div>
    Counter: {{ $counter }}

    <br>
    <br>

    <button @click="$wire.set('counter', $wire.counter + 1)">
        [ Synchronous + ]
    </button>

    <br>
    <br>

    <button @click="$wire.counter++">
        [ Deferred + ]
    </button>

    <button wire:click="$refresh">
        [ Refresh ]
    </button>

</div>

在上面的示例中，'Synchronous +' 按钮立即更新后端的 $counter 属性并反映视图中的更改，而不是 'Deferred +' 按钮在本地更新属性，因此我们必须使用Refresh 按钮发送其值并接收更新的视图