我在laravel项目中使用livewire。我想创建一个中继器，这样用户就可以添加更多的行与一个按钮。但其中一个字段是搜索字段。因此，如果用户在此处键入13个字符，并且数据库中存在具有此条形码的产品，则填充前2个字段。问题是当匹配发生时会有奇怪的 Flink 。有时它保持正确的值，有时字段为空。当字段有值时，当我键入另一个字段时，字段就会丢失它们的值！以下是包含中继器字段的表：
<tbody>
@foreach ($products as $index => $product)
<tr class="repeater-item">
<td >
<input class="prod-id" type="text" name="products[{{ $index }}][product]" wire:model="products.{{ $index }}.product_id">
</td>
<td>
<input class="prod-name" type="text" name="products[{{ $index }}][product]" wire:model="products.{{ $index }}.product">
</td>
<td>
<input class="search" type="text" name="products[{{ $index }}][barcode]" wire:model="products.{{ $index }}.barcode">
</td>
<td>
<input class="prod-tainia" type="text" name="products[{{ $index }}][tainia]" wire:model="products.{{ $index }}.tainia">
</td>
<td>
<input class="prod-lot" type="text" name="products[{{ $index }}][lot]" wire:model="products.{{ $index }}.lot">
</td>
<td>
<input class="prod-expdate" type="text" name="products[{{ $index }}][expdate]" wire:model="products.{{ $index }}.expdate">
</td>
<td>
<input type="number" name="products[{{ $index }}][quantity]" wire:model="products.{{ $index }}.quantity">
</td>
<td>
<button type="button" wire:click="removeProduct({{ $index }})">Remove</button>
</td>
</tr>
@endforeach
</tbody>下面是JavaScript代码：
<script>
$(document).ready(function(){
$('body').on('keyup', '.search', function(ev){
ev.preventDefault();
var query = $(this).val();
if(query.length == 13){
var parentRepeater = $(this).closest('.repeater-item');
if(query != '')
{
$.ajax({
url:"{{ route('products.search') }}",
method:"GET",
data:{search:query},
dataType:'json',
success:function(data)
{
if(data[0].name.length > 5){
parentRepeater.find('.prod-id').val(data[0].id);
parentRepeater.find('.prod-name').val(data[0].name);
}
}
});
}
}
});
});
</script>
1条答案
按热度按时间i2byvkas1#
每当您触发
wire:model的更新时，它都会触发Livewire的更新周期（了解有关here生命周期的更多信息）。在此周期中，向服务器（Livewire组件）发出请求，在那里更新属性。然后，它发送回一个请求，其中包含更新的数据。您正在执行一个不必要的请求，同时还在更改时手动调用了一个额外的请求。然后，您将创建一个竞争条件，具体取决于哪个请求先完成。在Livewire组件中使用手动（$.ajax，window.XMLHttpRequest）请求真的不建议，因为Livewire的存在是为了让这些请求在一个简单（和安全！）方式。相反，我建议在
.search行上使用wire:change="searchProduct({{$index}})"，然后在Livewire组件中使用searchProduct方法。在那里，我将实现您当前调用的路由上的任何内容，并在Livewire组件内的服务器端修改数据。这将修复您的 Flink ，以及减少请求。