My Livewire Component
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');
}
}
My View File
<!-- Begin Page Content -->
<div >
<!-- Page Heading -->
<div >
<div >
<div >
<div >
<h6 >Add Tariff</h6>
</div>
<div >
<form wire:submit.prevent="storeTariff">
@csrf
<div >
<!-- Default input -->
<div >
<input type="text" placeholder="Enter Tariff Name" wire:model="tariffName" >
</div>
</div><hr>
<div >
<div >
<h6 >Products, Basic and Weight Charges</h6>
</div>
<div >
<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"
>
@foreach ($rowProducts as $product)
<option value="{{ $product->id }}">
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text" name="allTariff[{{$index}}][basicCharge]" placeholder="Basic Charge" wire:model="allTariff.{{ $index }}.basicCharge" required>
</td>
<td>
<input type="text" name="allTariff[{{$index}}][additionalCharge]" placeholder="Weight Charge" wire:model="allTariff.{{ $index }}.additionalCharge" required>
</td>
</tr>
@endforeach
</tbody>
</table>
<div >
<div >
<button
wire:click.prevent="addProduct"> Add Another Product</button>
</div>
</div>
</div>
</div>
<hr>
{{-- <div >
<div > --}}
<button type="submit" >Add
Tariff</button>
{{-- </div>
</div> --}}
</form>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
Every time I click on the add tariff button this photo it give the blank page on this photo, but on console an html response is given. I have tried a couple methods and tricks still no way out, just stuck for days
I have already include the livewire @livewireStyles and @livewireScripts, and i can't find an answer anywhere else cause i don't see any question that match my problem, and i'm kinda new to livewire
CodePudding user response：
When using Livewire, there are a few things you need to be aware of. Due to the nature of how Livewire updates the page, there are some structural rules you need to follow.
The first and probably most important thing here, is that every Livewire-component view should only consist of one root element. And this includes comments!
If we count the root elements in your view, there are three - a comment, a div, and then another comment. So the first thing I did here, was to move the comments inside that div.
<div >
<!-- Begin Page Content -->
<!-- Page Heading -->
<div >
<div >
<div >
<div >
<h6 >Add Tariff</h6>
</div>
<div >
<form wire:submit.prevent="storeTariff">
@csrf
<div >
<!-- Default input -->
<div >
<input type="text" placeholder="Enter Tariff Name"
wire:model="tariffName">
</div>
</div>
<hr>
<div >
<div >
<h6 >Products, Basic and Weight Charges</h6>
</div>
<div >
<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"
>
@foreach ($rowProducts as $product)
<option value="{{ $product->id }}">
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text"
name="allTariff[{{ $index }}][basicCharge]"
placeholder="Basic Charge"
wire:model="allTariff.{{ $index }}.basicCharge" required>
</td>
<td>
<input type="text"
name="allTariff[{{ $index }}][additionalCharge]"
placeholder="Weight Charge"
wire:model="allTariff.{{ $index }}.additionalCharge"
required>
</td>
</tr>
@endforeach
</tbody>
</table>
<div >
<div >
<button wire:click.prevent="addProduct"> Add Another Product</button>
</div>
</div>
</div>
</div>
<hr>
{{-- <div >
<div > --}}
<button type="submit" >Add
Tariff</button>
{{-- </div>
</div> --}}
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
Then another thing I would recommend that you look into is using wire:key on the tr element inside your table-loop, and on the option element inside your inner loop. The value to wire:key should always be unique to that particular row, so using $loop->index is not generally advised. You can generate a dummy-ID for each record that you add to your array, which sole purpose is to track the individual row. Here's how, see the wire:key I added in the template,
<div >
<!-- Begin Page Content -->
<!-- Page Heading -->
<div >
<div >
<div >
<div >
<h6 >Add Tariff</h6>
</div>
<div >
<form wire:submit.prevent="storeTariff">
@csrf
<div >
<!-- Default input -->
<div >
<input type="text" placeholder="Enter Tariff Name"
wire:model="tariffName">
</div>
</div>
<hr>
<div >
<div >
<h6 >Products, Basic and Weight Charges</h6>
</div>
<div >
<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"
>
@foreach ($rowProducts as $product)
<option value="{{ $product->id }}" wire:key="product-{{ $product->id }}">
{{ $product->product_name }}
</option>
@endforeach
</select>
</td>
<td>
<input type="text"
name="allTariff[{{ $index }}][basicCharge]"
placeholder="Basic Charge"
wire:model="allTariff.{{ $index }}.basicCharge" required>
</td>
<td>
<input type="text"
name="allTariff[{{ $index }}][additionalCharge]"
placeholder="Weight Charge"
wire:model="allTariff.{{ $index }}.additionalCharge"
required>
</td>
</tr>
@endforeach
</tbody>
</table>
<div >
<div >
<button wire:click.prevent="addProduct"> Add Another Product</button>
</div>
</div>
</div>
</div>
<hr>
{{-- <div >
<div > --}}
<button type="submit" >Add
Tariff</button>
{{-- </div>
</div> --}}
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
And then in your component, just generate a unique string
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');
}
}