Laravel+Vue CRUD应用：编辑合同表单无数据问题求助

正在开发一款展示客户合同的CRUD Web应用，基于Laravel Eloquent和Vue实现。目前合同列表展示功能正常，但进入合同编辑页面时表单为空，无法加载对应合同数据。

1. 修复后端ContractController逻辑 #

原show方法仅支持按客户ID返回合同列表，编辑场景需要根据合同ID返回单条数据，需调整控制器方法：

<?php

namespace App\Http\Controllers;

use App\Models\Contract;
use Illuminate\Http\Request;

class ContractController extends Controller
{
    /**
     * 按客户ID返回合同列表
     */
    public function index($customer_id)
    {
        $contracts = Contract::where('customer_id', $customer_id)->get();
        return $contracts;
    }

    /**
     * 创建合同（补充保存逻辑）
     */
    public function store(Request $request)
    {
        $request->validate([
            'start_date' => 'required',
            'expire_date' => 'required',
            'payment' => 'required',
            'note' => 'required',
            'created_by_user' => 'required',
            'customer_id' => 'required|exists:customers,id' // 新增合同关联客户的验证
        ]);

        return Contract::create($request->all());
    }

    /**
     * 按合同ID返回单条合同数据
     */
    public function show($id)
    {
        return Contract::findOrFail($id);
    }

    /**
     * 更新合同（逻辑保留）
     */
    public function update(Request $request, Contract $contract)
    {
        $request->validate([
            'start_date' => 'required',
            'expire_date' => 'required',
            'payment' => 'required',
            'note' => 'required',
            'created_by_user' => 'required'
        ]);
    
        $contract->update($request->all());
        return $contract;
    }

    /**
     * 删除合同（逻辑保留）
     */
    public function destroy(Contract $contract)
    {
        $contract->delete();
        return response()->json(['message' => 'contract deleted successfully']);
    }
}

2. 配置正确的API路由 #

原resource路由无法满足客户列表和单条合同的区分需求，手动定义路由：

// 客户合同列表接口
Route::get('/contracts/customer/{customer_id}', [ContractController::class, 'index']);
// 单条合同详情、更新、删除接口
Route::get('/contracts/{contract}', [ContractController::class, 'show']);
Route::put('/contracts/{contract}', [ContractController::class, 'update']);
Route::delete('/contracts/{contract}', [ContractController::class, 'destroy']);
// 创建合同接口
Route::post('/contracts', [ContractController::class, 'store']);

3. 调整前端合同列表的API请求路径 #

修改ContractList组件的请求地址，对应新的后端路由：

async created() {
    try {
      const customer_id = this.$route.params.customer_id;
      const response = await axios.get(`/api/contracts/customer/${customer_id}`);
      this.contracts = response.data;
    } catch (error) {
      console.error(error);
    }
},

4. 修正前端路由冲突问题 #

原路由中/contracts/:customer_id和/contracts/:id会导致匹配混淆，调整路由顺序并修改列表路径：

{ path: '/contracts/create', component: ContractForm },
{ path: '/contracts/:id/edit', component: ContractForm },
{ path: '/contracts/:id', component: Contract },
{ path: '/contracts/customer/:customer_id', component: ContractList }, // 修改路径避免冲突

5. 修复表单输入类型错误 #

HTML中无type="float"，将支付金额输入框改为type="number"并设置小数步长：

<div class="mb-3">
  <label for="payment" class="form-label">Payment</label>
  <input class="form-control" type="number" step="0.01" id="payment" v-model="contract.payment" required />
</div>

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