Vue+Laravel Inertia中用复选框v-model传权限数组到控制器问题

问题根源 #

你所有复选框绑定了同一个响应式变量，导致选中状态同步触发。正确的做法是用数组存储选中的权限ID，利用Vue对数组的v-model绑定特性来单独控制每个复选框。

解决方案步骤 #

1. 定义响应式数组存储选中项

在Create.vue的setup函数中，声明数组用于保存选中的权限ID：

import { ref } from 'vue';
import { Inertia } from '@inertiajs/inertia';

export default {
  props: {
    permissions: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    // 存储选中的权限ID数组
    const selectedPermissions = ref([]);
    // 角色名称等其他字段
    const roleName = ref('');

    // 提交表单方法
    const submitForm = () => {
      Inertia.post(route('roles.store'), {
        name: roleName.value,
        permission_ids: selectedPermissions.value
      });
    };

    return {
      roleName,
      selectedPermissions,
      submitForm
    };
  }
}

2. 渲染独立控制的复选框列表

模板中循环权限列表，每个复选框绑定到数组，用权限ID作为value：

<template>
  <div class="container">
    <h1>创建角色</h1>
    <form @submit.prevent="submitForm">
      <!-- 角色名称输入框 -->
      <div class="mb-4">
        <label for="role-name">角色名称</label>
        <input
          type="text"
          id="role-name"
          v-model="roleName"
          required
          class="form-input"
        />
      </div>

      <!-- 权限复选框列表 -->
      <div class="mb-4">
        <h3>选择权限</h3>
        <div class="grid grid-cols-2 gap-2">
          <div v-for="permission in permissions" :key="permission.id" class="flex items-center">
            <input
              type="checkbox"
              :id="`perm-${permission.id}`"
              :value="permission.id"
              v-model="selectedPermissions"
            />
            <label :for="`perm-${permission.id}`" class="ml-2">{{ permission.name }}</label>
          </div>
        </div>
      </div>

      <button type="submit" class="btn btn-primary">创建角色</button>
    </form>
  </div>
</template>

3. 后端控制器接收处理

在Laravel角色控制器中，直接接收permission_ids数组并关联权限：

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

public function store(Request $request)
{
    $validated = $request->validate([
        'name' => 'required|string|unique:roles',
        'permission_ids' => 'nullable|array',
        'permission_ids.*' => 'exists:permissions,id'
    ]);

    $role = Role::create(['name' => $validated['name']]);
    
    // 关联选中的权限
    if (!empty($validated['permission_ids'])) {
        $role->permissions()->attach($validated['permission_ids']);
    }

    return redirect()->route('roles.index');
}

关键注意点 #

• 禁止将所有复选框绑定到同一个布尔变量，必须用数组存储选中ID
• 循环渲染时必须添加:key="permission.id"，避免Vue复用组件导致的状态混乱
• 确保每个复选框的value为唯一的权限ID，否则无法正确识别选中项

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