我在一个项目中使用Laravel Inertia，目前正在使用“Create.vue”表单创建新角色，我想显示权限列表（存储在表格中），用户可以选择复选框并将“ID”发送到控制器。问题是，当我使用V模型将输入复选框绑定到React性变量时，所有复选框的行为方式相同，当我选择一个的时候其他的也会被选中.这是我的代码
<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');
}请帮帮我！
2条答案
按热度按时间1szpjjfi1#
您可以在输入字段中使用v模型并绑定值，例如：〈输入类型=“复选框”虚拟模型=“权限”：值=”permission.id“
gojuced72#
这里的问题是
<label>，您需要确保checkbox具有可由标签标识的唯一ID，以便在单击checkbox时，它将仅标记由其标识的对象。