如何使用 laravel-livewire 对 2 个输入值求和

Question

我想总结2个值。

我的 livewire 刀片代码：

<label>Sayı 1:</label>
<input type="text" id="a" name="a" wire:model.lazy="a">
<br>

<label>Sayı 2:</label>
<input type="text" id="b" name="b" wire:model.lazy="b">
<br>
Sonuç : {{ $result}}

在 livewire 文件中

public $result;
public $a;
public $b;

public function render()
{   
   $this->result=$this->a+$this->b;
    return view('livewire.try1');
}

我在我的页面上看不到结果。

我改变$this->result=$this->a+$this->b; 行到$this->result=a+b; 它显示了undefined variable $a 。

我打开了调试栏 a 和 b 为空。

所以我无法让它工作。

Answer 1

首先，你的 Livewire 视图应该总是包裹在一个 div 中，有点像这样，

<div>
    <label>Sayı 1:</label>
    <input type="text" id="a" name="a" wire:model.lazy="a">

    <br>
    <label>Sayı 2:</label>
    <input type="text" id="b" name="b" wire:model.lazy="b">
    
    <br>
    Sonuç : {{ $result }}
</div>

然后我建议您使用生命周期挂钩进行更新以维护结果，

public $result;
public $a;
public $b;

public function updated()
{
    $this->result = ($this->a ?? 0) + ($this->b ?? 0);
}

public function render()
{
    return view('livewire.try1');
}

此外，由于您的绑定上有lazy修饰符，请注意它不会更新，直到您点击离开输入，请参阅https://laravel-livewire.com/docs/2.x/properties#lazy-updating