我有一个关于我的表单的小问题，它不是提交。我有一个记录表，我有一个附加在最后一行的表单，只有在单击显示按钮后才会出现。它现在工作，但我的问题是表单不是提交，我在inspect元素中发现input元素不在form标记内。但是在代码中input标记在form内。请参阅下面的详细信息
视图的代码：
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th style="background-color: #24d5b8" colspan="6">LIST OF INCOMING PRODUCTS</th>
</tr>
<tr>
<th class="wd-15p">PRODUCT</th>
<th class="wd-15p">UOM</th>
<th class="wd-15p">QUANTITY</th>
<th class="wd-15p">UNIT COST</th>
<th class="wd-15p">TOTAL COST</th>
<th class="wd-10p">Action</th>
</tr>
</thead>
<tbody>
@forelse($products as $index => $product)
<tr wire:key="product-list-{{ $index }}">
<td>
@if ($editedProductIndex !== $index)
{{ $product['product']['product_name'] }}
@else
{{-- <div wire:ignore>
<select wire:model.defer="products.{{ $index }}.product_id" id="product_id"
class="form-control">
<option value="">Select Product</option>
@foreach ($products as $product)
<option value="{{ $product->id }}">{{ $product->product_name }}
</option>
@endforeach
</select>
</div> --}}
<input type="text" wire:model.defer="products.{{ $index }}.product_id">
@error('editedProduct.product_id')
<span class="text-danger">{{ $message }}</span>
@enderror
@endif
</td>
<td>
@if ($editedProductIndex !== $index)
{{ $product['uom'] ?? 'UNIT' }}
@else
{{-- <div wire:ignore>
<select wire:model.defer="editedProduct.uom" id="uom" class="form-control">
<option value="">Select UOM</option>
@foreach ($uoms as $uom)
<option value="{{ $uom->id }}">{{ $uom->uom_name }}
</option>
@endforeach
</select>
</div> --}}
<input type="text" name="" id=""
wire:model.defer="products.{{ $index }}.uom">
@error('editedProduct.uom')
<span class="text-danger">{{ $message }}</span>
@enderror
@endif
</td>
<td>
@if ($editedProductIndex !== $index)
{{ $product['quantity'] }}
@else
<input type="text" wire:model.defer="products.{{ $index }}.quantity"
class="form-control">
@error('editedProduct.quantity')
<span class="text-danger">{{ $message }}</span>
@enderror
@endif
</td>
<td>
@if ($editedProductIndex !== $index)
{{ $product['unit_cost'] }}
@else
<input type="text" wire:model.defer="products.{{ $index }}.unit_cost"
class="form-control">
@error('editedProduct.unit_cost')
<span class="text-danger">{{ $message }}</span>
@enderror
@endif
</td>
<td>
@if ($editedProductIndex !== $index)
{{ $product['total_cost'] }}
@else
<input type="text" wire:model.defer="products.{{ $index }}.total_cost"
class="form-control">
@error('editedProduct.total_cost')
<span class="text-danger">{{ $message }}</span>
@enderror
@endif
</td>
<td>
@if ($editedProductIndex !== $index)
<button type="button" class="btn btn-info-light button-icon btn-md"
data-bs-toggle="tooltip" title="" data-bs-original-title="EDIT"
wire:click.prevent="editProduct({{ $index }})"><i
class="fe fe-edit"></i></button>
@else
<button type="button" class="btn btn-info-light button-icon btn-md"
data-bs-toggle="tooltip" title="" data-bs-original-title="SAVE"
wire:click.prevent="updateProduct({{ $index }})"><i
class="fe fe-save"></i></button>
<button type="button" class="btn btn-info-light button-icon" data-bs-toggle="tooltip"
title="" data-bs-original-title="CANCEL"
wire:click.prevent="cancelProductEdit({{ $index }})">
<i class="fe fe-x"></i>
</button>
@endif
</td>
</tr>
@empty
<tr>
<td colspan="6" class="text-center">No products found.</td>
</tr>
@endforelse
@if ($showAddForm)
<tr wire:ignore>
<form wire:submit.prevent="storeProductItems">
<td>
<div>
<select wire:model="selectedProduct" id="selectedProduct" class="form-control">
<option value="">Select Product</option>
@foreach ($product_list as $product)
<option value="{{ $product->id }}">{{ $product->product_name }}
</option>
@endforeach
</select>
</div>
@error('selectedProduct')
<span class="text-danger">{{ $message }}</span>
@enderror
</td>
<td>
<div>
<select wire:model.defer="unit_of_measure_item_id" id="unit_of_measure_item_id"
class="form-control">
<option value="">Select UOM</option>
@foreach ($uoms as $uom)
<option value="{{ $uom->id }}">{{ $uom->uom_name }}
</option>
@endforeach
</select>
</div>
@error('unit_of_measure_item_id')
<span class="text-danger">{{ $message }}</span>
@enderror
</td>
<td><input wire:model.defer="quantity" type="text" class="form-control"></td>
<td><input wire:model.defer="unit_cost" type="text" class="form-control"></td>
<td><input wire:model.defer="total_cost" type="text" class="form-control"></td>
<td>
<button type="submit" class="btn btn-info-light button-icon btn-md"
data-bs-toggle="tooltip" title="" data-bs-original-title="SAVE"><i
class="fe fe-save"></i></button>
<button type="button" class="btn btn-info-light button-icon" data-bs-toggle="tooltip"
title="" data-bs-original-title="DELETE" wire:click="cancelAddProduct">
<i class="fe fe-x"></i>
</button>
</td>
</form>
</tr>
@else
<tr>
<td colspan="6" class="align-item-left">
<button type="button" class="btn btn-primary" wire:click="addProduct">Add Product</button>
</td>
</tr>
@endif
</tr>
</tbody>
</table>
</div>
@push('jsplugins')
<script src="{{ asset('assets/plugins/select2/js/select2.min.js') }}"></script>
@endpush
@push('scripts')
<script>
window.addEventListener('select2', event => {
$('#selectedProduct').select2();
$('#selectedProduct').on('change', function(e) {
@this.set('selectedProduct', e.target.value);
});
$('#unit_of_measure_item_id').select2();
$('#unit_of_measure_item_id').on('change', function(e) {
@this.set('unit_of_measure_item_id', e.target.value);
});
});
</script>
@endpushlivewire组件类：
<?php
namespace App\Http\Livewire\Inventory\Shipment;
use App\Models\Admin\UnitOfMeasureItems;
use App\Models\Inventory\Product;
use App\Models\Inventory\Shipment\IncomingStockProduct;
use Livewire\Component;
class IncomingStockProducts extends Component
{
public $editedProductIndex = null;
public $incoming_stock;
public $products = [];
public $uoms;
public $product_list;
public $selectedProduct = null, $unit_of_measure_item_id, $quantity, $unit_cost, $total_cost;
public $showAddForm = false;
protected $listeners = [
'selectedProduct'
];
public function mount($incoming_stock)
{
$this->incoming_stock = $incoming_stock;
$this->products = $this->incoming_stock->IncomingStockProducts->load('product')->toArray();
$this->product_list = Product::all();
$this->uoms = collect();
}
public function render()
{
return view('livewire.inventory.shipment.incoming-stock-products');
}
public function updatedSelectedProduct($product_id)
{
if (!is_null($product_id)) {
$uom = Product::where('id', $product_id)->first();
$this->uoms = UnitOfMeasureItems::where('unit_of_measure_id', $uom->unit_of_measure_id)->get();
}
}
public function hydrate()
{
$this->dispatchBrowserEvent('select2');
}
public function editProduct($productIndex)
{
$this->showAddForm = false;
$this->editedProductIndex = $productIndex;
}
public function addProduct()
{
$this->editedProductIndex = null;
$this->showAddForm = true;
}
public function cancelAddProduct()
{
$this->showAddForm = false;
}
public function storeProductItems()
{
$this->validate([
'selectedProduct' => 'required|numeric|exists:products,id',
'unit_of_measure_item_id' => 'required|numeric|exists:unit_of_measure_items,id',
'quantity' => 'required',
'unit_cost' => 'required',
'total_cost' => 'required',
]);
$this->incoming_stock->IncomingStockProducts()->create([
'product_id' => $this->selectedProduct,
'unit_of_measure_item_id' => $this->unit_of_measure_item_id,
'quantity' => $this->quantity,
'unit_cost' => $this->unit_cost,
'total_cost' => $this->total_cost,
]);
$this->showAddForm = false;
$this->products = $this->incoming_stock->IncomingStockProducts->load('product')->toArray();
}
}
请帮帮我TIA
尝试将wire：ignore放在form标记中，并将wire：key放在form tr中，但仍然相同。
1条答案
按热度按时间6l7fqoea1#
我通过添加wire：单击保存按钮并调用方法来保存数据，而不是使用表单的wire：submit来解决这个问题。