代码之家 › 专栏 › 技术社区 › aggtr

在另一个输入中输入值后,Javascript输入文本将丢失值(使用livewire)

laravel-livewire laravel jquery php javascript

0

aggtr · 技术社区 · 2 年前

我在laravel项目中使用livewire。我想创建一个中继器,这样用户就可以通过按钮添加更多的行。但其中一个字段是搜索字段。因此,如果用户在那里键入13个字符,并且数据库中有一个带有此条形码的产品,则会填充前2个字段。问题是,当比赛发生时,会有一个奇怪的闪光。有时它保持正确的值,有时字段为空。当字段有值时,当我键入另一个字段时,字段就会丢失其值!以下是包含中继器字段的表格:

<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>

0 回复 | 直到 2 年前

1

Yinci 2 年前

每当您触发对的更新时 wire:model ,它触发Livewire的更新周期(了解有关生命周期的更多信息 here ). 在这个周期中,会向服务器(Livewire组件)发出一个请求,在那里更新属性。然后,它发送一个带有更新数据的请求。你也在执行一个不必要的请求手动调用一个额外的更改请求。然后,您将创建一个比赛条件,具体取决于哪个请求首先完成。使用手册( $.ajax , window.XMLHttpRequest )Livewire组件内部的请求实际上是不建议的,因为Livewire的存在是为了以一种简单(安全!)的方式为您发出这些请求。

相反,我建议 wire:change="searchProduct({{$index}})" 上 .search 行,然后有一个 searchProduct 方法。在那里,我将实现您当前调用的路由上的任何内容,并在Livewire组件内的服务器端修改数据。这将修复您的闪烁,并减少请求。