[英]Table disappears after clicking on add button on Livewire
我的 Livewire 組件
public $productId;
public $allTariff = [];
public $rowProducts = [];
public function mount()
{
$this->rowProducts = Products::all();
$this->allTariff = [
['productId' => '', 'basicCharge' => '', 'additionalCharge' => '']
];
}
public function addProduct()
{
$this->allTariff[] = ['productId' => '', 'basicCharge' => '', 'additionalCharge' => ''];
}
public function render()
{
$rowProducts = Products::all();
return view('livewire.admin.admin-add-tariffs-component', ['rowProducts'=>$rowProducts)->layout('layouts.admin.base');
}
我的查看文件
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-8">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Add Tariff</h6>
</div>
<div class="card-body">
<form wire:submit.prevent="storeTariff">
@csrf
<div class="form-row">
<!-- Default input -->
<div class="form-group col-md-8">
<input type="text" class="form-control" placeholder="Enter Tariff Name" wire:model="tariffName" >
</div>
</div><hr>
<div class="card">
<div class="card-header">
<h6 class="text-primary">Products, Basic and Weight Charges</h6>
</div>
<div class="card-body">
<table class="table" id="products_table">
<thead>
<tr>
<th>Product</th>
<th>Basic Charge</th>
<th>Weight Charge</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($allTariff as $index => $value)
<tr>
<td>
<select name="allTariff[{{$index}}][productId]"
wire:model="allTariff.{{ $index }}.productId"
class="custom-select custom-select-sm form-control form-control-sm">
@foreach ($rowProducts as $product)
<option value="{{ $product->id }}">
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text" class="form-control form-control-user" name="allTariff[{{$index}}][basicCharge]" placeholder="Basic Charge" wire:model="allTariff.{{ $index }}.basicCharge" required>
</td>
<td>
<input type="text" class="form-control form-control-user" name="allTariff[{{$index}}][additionalCharge]" placeholder="Weight Charge" wire:model="allTariff.{{ $index }}.additionalCharge" required>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="row">
<div class="col-md-12">
<button class="btn btn-sm btn-secondary"
wire:click.prevent="addProduct">+ Add Another Product</button>
</div>
</div>
</div>
</div>
<hr>
{{-- <div class="form-row">
<div class="form-group col-md-3"> --}}
<button type="submit" class="form-control btn btn-small btn-primary">Add
Tariff</button>
{{-- </div>
</div> --}}
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
每次我點擊這張照片的添加關稅按鈕時,它都會在這張照片上顯示空白頁,但在控制台上會給出 html 響應。
我嘗試了幾種方法和技巧仍然沒有出路,只是卡了幾天
我已經包含了 livewire @livewireStyles
和@livewireScripts
,我在其他任何地方都找不到答案,因為我沒有看到任何與我的問題相匹配的問題,而且我對 livewire 有點陌生
使用 Livewire 時,您需要注意一些事項。 由於 Livewire 如何更新頁面的性質,您需要遵循一些結構規則。
這里的第一件可能也是最重要的事情是,每個 Livewire 組件視圖應該只包含一個根元素。 這包括評論
如果我們計算您視圖中的根元素,則有三個 - 一個評論、一個 div,然后是另一個評論。 所以我在這里做的第一件事就是將評論移動到那個div中。
<div class="container-fluid">
<!-- Begin Page Content -->
<!-- Page Heading -->
<div class="row">
<div class="col-lg-8">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Add Tariff</h6>
</div>
<div class="card-body">
<form wire:submit.prevent="storeTariff">
@csrf
<div class="form-row">
<!-- Default input -->
<div class="form-group col-md-8">
<input type="text" class="form-control" placeholder="Enter Tariff Name"
wire:model="tariffName">
</div>
</div>
<hr>
<div class="card">
<div class="card-header">
<h6 class="text-primary">Products, Basic and Weight Charges</h6>
</div>
<div class="card-body">
<table class="table" id="products_table">
<thead>
<tr>
<th>Product</th>
<th>Basic Charge</th>
<th>Weight Charge</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($allTariff as $index => $value)
<tr>
<td>
<select name="allTariff[{{ $index }}][productId]"
wire:model="allTariff.{{ $index }}.productId"
class="custom-select custom-select-sm form-control form-control-sm">
@foreach ($rowProducts as $product)
<option value="{{ $product->id }}">
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text" class="form-control form-control-user"
name="allTariff[{{ $index }}][basicCharge]"
placeholder="Basic Charge"
wire:model="allTariff.{{ $index }}.basicCharge" required>
</td>
<td>
<input type="text" class="form-control form-control-user"
name="allTariff[{{ $index }}][additionalCharge]"
placeholder="Weight Charge"
wire:model="allTariff.{{ $index }}.additionalCharge"
required>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="row">
<div class="col-md-12">
<button class="btn btn-sm btn-secondary" wire:click.prevent="addProduct">+ Add Another Product</button>
</div>
</div>
</div>
</div>
<hr>
{{-- <div class="form-row">
<div class="form-group col-md-3"> --}}
<button type="submit" class="form-control btn btn-small btn-primary">Add
Tariff</button>
{{-- </div>
</div> --}}
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
然后,我建議您研究的另一件事是在表循環內的tr
元素和內部循環內的option
元素上使用wire:key
。 wire:key
的值對於該特定行應該始終是唯一的,因此通常不建議使用$loop->index
。 您可以為添加到數組中的每條記錄生成一個虛擬 ID,其唯一目的是跟蹤單個行。 方法如下,請參閱我在模板中添加的wire:key
,
<div class="container-fluid">
<!-- Begin Page Content -->
<!-- Page Heading -->
<div class="row">
<div class="col-lg-8">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Add Tariff</h6>
</div>
<div class="card-body">
<form wire:submit.prevent="storeTariff">
@csrf
<div class="form-row">
<!-- Default input -->
<div class="form-group col-md-8">
<input type="text" class="form-control" placeholder="Enter Tariff Name"
wire:model="tariffName">
</div>
</div>
<hr>
<div class="card">
<div class="card-header">
<h6 class="text-primary">Products, Basic and Weight Charges</h6>
</div>
<div class="card-body">
<table class="table" id="products_table">
<thead>
<tr>
<th>Product</th>
<th>Basic Charge</th>
<th>Weight Charge</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($allTariff as $index => $value)
<tr wire:key="tariff-{{ $value->wireKey }}">
<td>
<select name="allTariff[{{ $index }}][productId]"
wire:model="allTariff.{{ $index }}.productId"
class="custom-select custom-select-sm form-control form-control-sm">
@foreach ($rowProducts as $product)
<option value="{{ $product->id }}" wire:key="product-{{ $product->id }}">
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text" class="form-control form-control-user"
name="allTariff[{{ $index }}][basicCharge]"
placeholder="Basic Charge"
wire:model="allTariff.{{ $index }}.basicCharge" required>
</td>
<td>
<input type="text" class="form-control form-control-user"
name="allTariff[{{ $index }}][additionalCharge]"
placeholder="Weight Charge"
wire:model="allTariff.{{ $index }}.additionalCharge"
required>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="row">
<div class="col-md-12">
<button class="btn btn-sm btn-secondary" wire:click.prevent="addProduct">+ Add Another Product</button>
</div>
</div>
</div>
</div>
<hr>
{{-- <div class="form-row">
<div class="form-group col-md-3"> --}}
<button type="submit" class="form-control btn btn-small btn-primary">Add
Tariff</button>
{{-- </div>
</div> --}}
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
然后在你的組件中,只生成一個唯一的字符串
class AdminAddTariffsComponent
{
public $productId;
public $allTariff = [];
public $rowProducts = [];
public function mount()
{
$this->rowProducts = Products::all();
$this->addProduct();
}
public function addProduct()
{
$this->allTariff[] = [
'productId' => '',
'basicCharge' => '',
'additionalCharge' => '',
'wireKey' => \Str::uuid(),
];
}
public function render()
{
return view('livewire.admin.admin-add-tariffs-component')
->layout('layouts.admin.base');
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.