Laravel+Inertia+Vue多选框提交报错Array to string conversion解决

问题根源 #

VueMultiselect默认是多选模式，此时v-model绑定的form.employee是一个包含选中对象的数组，但你的Salary模型中employee_id是单个字段（存储单个员工ID，类型为字符串/整数），直接将数组赋值给该字段就会触发「数组转字符串」的错误。

解决方案 #

根据业务需求选择以下两种方案之一：

方案1：需要单选单个员工 #

将VueMultiselect改为单选模式，确保v-model返回单个对象而非数组：

1. 修改Vue组件中的VueMultiselect标签，添加:multiple="false"属性：

<VueMultiselect
    v-model="form.employee"
    :options="employee"
    :searchable="true"
    :close-on-select="true"
    :clear-on-select="false"
    :preserve-search="false"
    :multiple="false" <!-- 开启单选模式 -->
    placeholder="انتخاب کنید"
    track-by="id"
    label="name"
/>

2. 调整Laravel控制器，提取选中对象的ID赋值给employee_id：

public function store(Request $request): RedirectResponse
{
    $validatedData = $request->validate([
        'employee.id' => 'required|integer|exists:employees,id',
        'description' => 'required',
    ]);

    $salary = new Salary();
    $salary->employee_id = $validatedData['employee']['id'];
    $salary->description = $validatedData['description'];

    $salary->save();

    return redirect()->route('salaries.index')->with('message', 'عملیه با موفقیت انجام شد.');
}

方案2：需要多选多个员工（多对多关联） #

如果业务逻辑是给多个员工发放工资，需要调整数据库结构并建立多对多关联：

1. 创建中间表迁移文件：

php artisan make:migration create_salary_employee_table

迁移文件内容：

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up()
    {
        Schema::create('salary_employee', function (Blueprint $table) {
            $table->foreignId('salary_id')->constrained()->onDelete('cascade');
            $table->foreignId('employee_id')->constrained()->onDelete('cascade');
            $table->primary(['salary_id', 'employee_id']);
        });
    }

    public function down()
    {
        Schema::dropIfExists('salary_employee');
    }
};

2. 在Salary模型中定义多对多关联：

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsToMany;

class Salary extends Model
{
    // ... 其他模型代码

    public function employees(): BelongsToMany
    {
        return $this->belongsToMany(Employee::class);
    }
}

3. 调整控制器，保存工资记录并关联选中的员工：

public function store(Request $request): RedirectResponse
{
    $validatedData = $request->validate([
        'employee' => 'required|array',
        'employee.*.id' => 'required|integer|exists:employees,id',
        'description' => 'required',
    ]);

    // 创建工资记录
    $salary = Salary::create([
        'description' => $validatedData['description'],
    ]);

    // 提取选中员工的ID并关联
    $employeeIds = collect($validatedData['employee'])->pluck('id')->toArray();
    $salary->employees()->attach($employeeIds);

    return redirect()->route('salaries.index')->with('message', 'عملیه با موفقیت انجام شد.');
}

优化选项：直接提交ID数组 #

可以在Vue组件中配置VueMultiselect只提交员工ID数组，减少数据传输：

<VueMultiselect
    v-model="form.employeeIds"
    :options="employee"
    :searchable="true"
    :close-on-select="true"
    :clear-on-select="false"
    :preserve-search="false"
    :multiple="true" <!-- 根据需求设置true/false -->
    placeholder="انتخاب کنید"
    track-by="id"
    label="name"
    value="id" <!-- 指定提交字段为ID -->
/>

对应的form定义：

const form = useForm({
  employeeIds: [],
  description: "",
});

控制器中直接使用$validatedData['employeeIds']即可，无需处理对象数组。

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