如何避免简单输入计算的 livewire 请求？

Question

我如何避免使用 Livewire 对 3 个输入进行计算并改用 JS，但仍然可以将输入及其新值与组件绑定。

示例：

                <input id="cash-price"
                        type="text"
                       wire:model="total_cache_price"
                       class="amount-credit">

                <input id="deposit"
                       type="text"
                       wire:model="deposit"
                       class="amount-credit">

                <input id="trade-in"
                       type="text"
                       wire:model="trade_in"
                       class="amount-credit">

我可以很容易地用JS做一个简单的计算，但是提交表单后Livewire组件中的属性仍然是空或null。我试图避免每次输入更改时都发出 livewire 请求。

注意： 我理解 livewire 中的延迟更新，问题是属性值没有改变。

Answer 1

我将以alpine js + livewire 方式向您展示一个示例。在这里，我想在 select 中的 selected 选项的两个输入中设置值。请注意，在 alpine 中使用 x-ref 直接访问 DOM 元素而不使用 getElementById.

<div x-data="{
from_date : @entangle('from_date').defer,
to_date : @entangle('to_date').defer,
dateChange(){
    select = this.$refs.years;
    this.from_date = select.options[select.selectedIndex].getAttribute('data-from');
    this.to_date = select.options[select.selectedIndex].getAttribute('data-to');
},
resetFilters(){
    this.net_balances = false;
}}">
<select x-ref="years" @change="dateChange()">
    <option value="">Year</option>
    @foreach ($years as $key => $year)
    <option wire:key="{{ 'years'.$key }}" data-from="{{ $year->from_date }}" data-to="{{ $year->to_date }}" value="{{ $year->id }}">{{ $year->name }} </option>
    @endforeach
</select>
<div>
    <text type="date" x-model="from_date" />
</div>
<div >
    <text type="date" x-model="to_date" />
</div>

如何避免简单输入计算的 livewire 请求？

How to avoid livewire request for simple inputs calculations?

laravel

laravel-livewire