Send an Array to the controller using checkboxes and the v-model in vue js-CodePudding

I'm using Laravel Inertia on a project and I'm currently working on the form "Create.vue" to create a new role, I want to show the list of permissions (that is stored in a table) with checkboxes so the user can select them and send the "id" to the controller. The problem is when i bind the input checkbox to a reactive variable using the v-model all the checkboxes behave the same way, when i select one the others also get selected. Here is my code

<template>
    <div>

        <Head title="Crear Roles" />
        <h1 >Crear Rol</h1>
        <div >
            <form @submit.prevent="roles.post(route('roles.store'))">
                <div >
                    <text-input v-model="roles.name" type="text" label="Nombre del Rol"
                         :id="name" name="name" />

                </div>
                <div >
                    <div >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 >
                    <Link type="button" :href="route('roles.index')" >
                    <span >Cancelar</span>
                    </Link>

                    <button  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');
    }

Help me please!

CodePudding user response：

Your problem here is the <label> you need to ensure that the checkbox has a unique id that can be identify by the label so that if you click the checkbox it will mark only those that identify by it.

<div v-for="permission in permissions" :key="permission.id">
    <div >
        <input type="checkbox" :id="permission.name">
        <label :for="permission.name">{{ permission.name }}</label>
    </div>
</div>

CodePudding user response：

You can use v-model in you input field & bind value Like: < input type="checkbox" v-model="permissions" :value="permission.id"