Laravel9+Vue3新增员工时下拉选择关联公司保存实现方法

整个功能分后端逻辑配置、模板改造、校验规则配置三部分落地，所有代码可直接复用调整。

1. 后端逻辑配置 #

先补全模型关联、控制器方法、路由三块基础逻辑：

• 配置模型关联与字段白名单

// app/Models/Employee.php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;

class Employee extends Model
{
    protected $fillable = ['first_name', 'last_name', 'email', 'company_id'];

    public function company()
    {
        return $this->belongsTo(Company::class);
    }
}

// app/Models/Company.php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;

class Company extends Model
{
    protected $fillable = ['company_name'];
}

• 编写控制器方法，包含页面渲染和数据存储逻辑

// app/Http/Controllers/EmployeeController.php
namespace App\Http\Controllers;

use App\Models\Employee;
use App\Models\Company;
use Illuminate\Http\Request;

class EmployeeController extends Controller
{
    // 渲染新增员工页面
    public function create()
    {
        // 查询全量公司数据传递给模板
        $companies = Company::all();
        return view('mitarbeiter.create', compact('companies'));
    }

    // 处理员工提交存储逻辑
    public function store(Request $request)
    {
        // 参数校验
        $validated = $request->validate([
            'first_name' => 'required|string|max:255',
            'last_name' => 'required|string|max:255',
            'email' => 'required|email|unique:employees,email',
            'company_id' => 'required|exists:companies,id'
        ]);

        Employee::create($validated);
        // 存储完成后跳转，可自行修改目标地址
        return redirect('/mitarbeiter')->with('success', '员工新增成功');
    }
}

• 补全对应路由

// routes/web.php
use App\Http\Controllers\EmployeeController;

Route::get('/mitarbeiter/create', [EmployeeController::class, 'create']);
Route::post('/mitarbeiter', [EmployeeController::class, 'store']);

2. Blade+Vue3模板改造 #

你现有模板存在三个问题：select标签未加提交用的name属性、option遍历逻辑错误、输入框name和数据库字段不匹配，修正后代码如下：

@extends('mitarbeiter.layout')
@section('content')
<div class="card">
  <div class="card-header">Mitarbeiter Page</div>
  <div class="card-body" id="employee-app">
    {{-- 操作成功提示 --}}
    @if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
    @endif
      
    <form action="{{ url('mitarbeiter') }}" method="post">
      @csrf
      <label>Vorname</label></br>
      <input type="text" name="first_name" id="vorname" v-model="form.first_name" class="form-control" value="{{ old('first_name') }}">
      @error('first_name')<div class="text-danger small">{{ $message }}</div>@enderror
      </br>

      <label>Nachname</label></br>
      <input type="text" name="last_name" id="nachname" v-model="form.last_name" class="form-control" value="{{ old('last_name') }}">
      @error('last_name')<div class="text-danger small">{{ $message }}</div>@enderror
      </br>

      <label>Email</label></br>
      <input type="email" name="email" id="email" v-model="form.email" class="form-control" value="{{ old('email') }}">
      @error('email')<div class="text-danger small">{{ $message }}</div>@enderror
      </br>

      <label>Company</label></br>
      {{-- select必须设置name为company_id，后端才能接收到选中的公司ID --}}
      <select name="company_id" v-model="form.company_id" class="form-control">
        <option value="">------Select Company-------</option>
        {{-- 遍历后端传递的公司列表，option值存公司ID，展示文本存公司名称 --}}
        @foreach($companies as $company)
        <option value="{{ $company->id }}" {{ old('company_id') == $company->id ? 'selected' : '' }}>
            {{ $company->company_name }}
        </option>
        @endforeach
      </select>
      @error('company_id')<div class="text-danger small">{{ $message }}</div>@enderror
      </br>

      </br>
      <input type="submit" value="Save" class="btn btn-success"></br>
    </form>
   
  </div>
</div>

<script>
// 若已在全局layout引入Vue3，直接初始化实例即可
const { createApp } = Vue
createApp({
  data() {
    return {
      form: {
        first_name: '',
        last_name: '',
        email: '',
        company_id: ''
      }
    }
  }
}).mount('#employee-app')
</script>
@stop

3. 关键注意点 #

• 所有表单提交元素必须设置name属性，否则后端无法通过$request获取对应参数；下拉选项的value必须存储公司表主键ID，不能直接存公司名称，匹配外键关联规则。
• 后端校验必须加company_id的exists规则，拦截恶意提交的不存在的公司ID。
• 代码中字段名统一对齐你给出的Employee表结构，如果你实际项目保留德文字段名，对应调整模型白名单、校验规则、输入框name属性即可。
• 如果不想用Blade直接渲染公司列表，可新增公司列表查询接口，在Vue的mounted钩子中发请求拉取数据后再渲染下拉，核心逻辑一致。

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