我正在一个项目中使用Laravel惯性，我目前正在制作表单"Create.vue"要创建一个新角色，我想要显示权限列表(存储在一个表中)，其中包含复选框，以便用户可以选择它们并发送"id"。到控制器。问题是，当我使用v模型将输入复选框绑定到一个反应变量时，所有复选框的行为都是相同的，当我选择一个时，其他复选框也被选中。这是我的代码
<template>
<div>
<Head title="Crear Roles" />
<h1 class="mb-5 text-2xl font-bold text-cyan-900">Crear Rol</h1>
<div class="max-w-3xl bg-white rounded-md shadow overflow-hidden">
<form @submit.prevent="roles.post(route('roles.store'))">
<div class="flex flex-wrap -mb-8 -mr-6 p-8">
<text-input v-model="roles.name" type="text" label="Nombre del Rol"
class="pb-7 pr-6 w-full lg:w-1/2" :id="name" name="name" />
</div>
<div class="flex-wrap -mb-8 -mr-6 p-8">
<div class="block">Permisos para este Rol</div>
<!-- ===========HERE IS THE PROBLEM -->
<div v-for="permission in permissions" :key="permission.id">
<label for="">
<input type="checkbox" name="permissions[]" value="{{ permission.id }}" id="" >
{{ permission.name }}
</label>
</div>
<!-- =====================================================-->
</div>
<div class="flex items-center justify-end px-8 py-4 bg-gray-50 border-t border-gray-100">
<Link type="button" :href="route('roles.index')" class="btn-cancelar">
<span class="text-white font-bold">Cancelar</span>
</Link>
<button class="btn-indigo mx-1" type="submit">
Crear Rol
</button>
</div>
</form>
</div>
</div>
</template>
<script>
import Layout from "../../Shared/Layout.vue";
import TextInput from "../../Shared/TextInput.vue";
import SelectInput from "../../Shared/SelectInput.vue";
import { Head, Link } from "@inertiajs/inertia-vue3";
import { reactive, ref } from "vue";
import { useForm } from "@inertiajs/inertia-vue3";
export default {
components: {
Head,
Link,
TextInput,
SelectInput,
},
layout: Layout,
props: {
permissions: Object
},
setup() {
const name = ref("");
const premissions = ref([]);
const roles = useForm({
name: "",
permissions: [],
});
/* const guardar = async () => {
console.log(roles);
roles.post(route("roles.store"), roles);
}; */
return {
roles
};
},
};
</script>
//================================the controller===========
public function create()
{
$permissions = Permission::all();
return Inertia::render('Roles/Nuevo', [
'permissions' => $permissions
]);
}
public function store(Request $request)
{
$role = Role::create($request->all());
//si los permisos no están nulos se lo asignamos al rol creado
if (!empty($request->permissions)) {
$role->givePermissionTo($request->permissions);
}
return Redirect::route('roles.index')->with('success', 'Rol Creado');
}
请帮帮我!
您可以使用v-model在您的输入字段&绑定值。
:
<input type="checkbox" v-model="permissions" :value="permission.id" />
您的问题是<label>，您需要确保checkbox具有可以通过标签识别的唯一id，以便如果您单击checkbox，它将仅标记那些由它识别的。
<div v-for="permission in permissions" :key="permission.id">
<div class="flex items-center gap-1">
<input type="checkbox" :id="permission.name">
<label :for="permission.name">{{ permission.name }}</label>
</div>
</div>