在 livewire 中刷新工作答案

【问题标题】：Refresh a job in livewire在 livewire 中刷新工作
【发布时间】：2021-06-10 16:23:47
【问题描述】：

我在 livewire 视图中有两个输入。当在第一个输入中输入一个值时，组件会根据从 api 接收到的数据和第一个输入中的值进行计算，计算结果显示在第二个输入中。现在我希望每十秒再次进行一次计算并显示在第二个输入中。根据livewire文档，我使用了poll，但是只是刷新了视图，没有显示新的值。下面我会放代码。

输入：

<input wire:model="unit" type="text" class="form-control form-control-xl" style="text-align: center" value="0">
</br>
<input id="toman" type="text" style="text-align: center" class="form-control form-control-xl">

组件：

<?php

namespace App\Http\Livewire\Frontend\Order;

use App\Models\Currency;
use App\Models\Network;
use Livewire\Component;

class Buy extends Component
{
    public $currencySelect ='btc';
    public $unit;


    public function mount()
    {
        $this->unit = 0;
    }

    public function updatedUnit()
    {
        $this->validate([
            'unit' => 'numeric',
        ]);
            if ($this->unit !== ''){
                $this->dispatchBrowserEvent('changeToman', [
                    'toman' => calculatPrice($this->currencySelect , $this->unit),
                ]);
            }
    }

    
    public function render()
    {
        $currencies = Currency::where('buy_status', 'active')->get();
        return view('livewire.frontend.order.buy')->with('currencies', $currencies);
    }
}

这用于第二个输入中的设置值：

<script>
 window.addEventListener('changeToman', event => {
  $('#toman').val(new Intl.NumberFormat('ir-IR', { maximumSignificantDigits: 3}).format(event.detail.toman));
        });

</script>

【问题讨论】：

标签： laravel laravel-livewire

【解决方案1】：

我假设 calculatPrice 是组件的公共方法。如果对第一个输入进行任何更改，则不太了解每 10 秒将如何执行此功能。

public $calculated, $unit;

public function reCalculate()
{
   if($this->unit) {      // if input unit has value call the method and assign value
      $this->calculated = $this->calculatPrice($this->currencySelect , $this->unit);
   }  
}

//......

<div wire:poll.10000ms="reCalculate">  // every 10 sec call the method 
   <input wire:model="unit" type="text" class="form-control" style="text-align: center">
{{ $calculated }}
</div>

【讨论】：

CalculatePrice 是一个助手