php 使用复选框和vue js中的v-model将Array发送到控制器

x6yk4ghg  于 2023-01-16  发布在  PHP
关注(0)|答案(2)|浏览(89)

我在一个项目中使用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');
    }

请帮帮我!

1szpjjfi

1szpjjfi1#

您可以在输入字段中使用v模型并绑定值,例如:〈输入类型=“复选框”虚拟模型=“权限”:值=”permission.id“

gojuced7

gojuced72#

这里的问题是<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>

相关问题