laravel - 如何避免简单输入计算的 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 中的延迟更新，问题在于属性值没有改变。

标签： laravellaravel-livewire

Answer 1

我将以 alpine js + livewire 的方式向您展示一个示例。在这里，我想在 select 中的选定选项的两个输入中设置值。请注意，在 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>