点击Livewire添加按钮后表格消失，页面空白

核心原因 #

1. 缺失绑定属性：视图中使用wire:model="tariffName"绑定输入框，但Livewire组件未声明对应的public $tariffName;公共属性，导致组件更新时抛出错误，中断渲染流程，引发页面空白。
2. 冗余CSRF令牌：Livewire表单无需手动添加@csrf，框架会自动在请求中携带CSRF验证信息，手动添加可能引发潜在冲突。
3. 可选优化点：rowProducts无需在mount和render中重复查询，减少不必要的数据库请求。

修改后的Livewire组件代码 #

<?php

namespace App\Http\Livewire\Admin;

use App\Models\Products;
use Livewire\Component;

class AdminAddTariffsComponent extends Component
{
    public $allTariff = [];
    public $tariffName; // 新增缺失的绑定属性

    public function mount()
    {
        // 初始化产品行数据
        $this->allTariff = [
            ['productId' => '', 'basicCharge' => '', 'additionalCharge' => '']
        ];
    }

    public function addProduct()
    {
        $this->allTariff[] = ['productId' => '', 'basicCharge' => '', 'additionalCharge' => ''];
    }

    // 补充表单提交处理方法（视图中已引用）
    public function storeTariff()
    {
        // 添加表单验证逻辑
        $this->validate([
            'tariffName' => 'required|string|max:255',
            'allTariff.*.productId' => 'required|exists:products,id',
            'allTariff.*.basicCharge' => 'required|numeric',
            'allTariff.*.additionalCharge' => 'required|numeric',
        ]);

        // 这里添加数据存储逻辑，示例：
        // Tariff::create([
        //     'name' => $this->tariffName,
        //     // 关联产品费用的存储逻辑...
        // ]);
    }

    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">
                        <div class="form-row">
                            <div class="form-group col-md-8">
                                <input type="text" class="form-control" placeholder="Enter Tariff Name" wire:model="tariffName">
                                @error('tariffName') <span class="text-danger">{{ $message }}</span> @enderror
                            </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 wire:model="allTariff.{{ $index }}.productId"
                                                        class="custom-select custom-select-sm form-control form-control-sm">
                                                        <option value="">Select Product</option>
                                                        @foreach ($rowProducts as $product)
                                                            <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error("allTariff.$index.productId") <span class="text-danger">{{ $message }}</span> @enderror
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-user" placeholder="Basic Charge" wire:model="allTariff.{{ $index }}.basicCharge">
                                                    @error("allTariff.$index.basicCharge") <span class="text-danger">{{ $message }}</span> @enderror
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control form-control-user" placeholder="Weight Charge" wire:model="allTariff.{{ $index }}.additionalCharge">
                                                    @error("allTariff.$index.additionalCharge") <span class="text-danger">{{ $message }}</span> @enderror
                                                </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>

                        <button type="submit" class="form-control btn btn-small btn-primary">Add Tariff</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.container-fluid -->

额外说明 #

• 添加了表单验证和错误提示，方便后续快速定位其他潜在问题
• 给产品选择框添加了默认空选项，符合常规表单交互逻辑
• 移除了视图中冗余的name属性，Livewire的wire:model会自动处理表单数据绑定

内容的提问来源于stack exchange，提问作者iDRE