Question 16202 in Laravel Question posted in
The official Laravel Documentation can be found here.

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

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

Help me please!

Tags:

2

Answers


  1. 0

    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 class="flex items-center gap-1">
        <input type="checkbox" :id="permission.name">
        <label :for="permission.name">{{ permission.name }}</label>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    You can use v-model in your input field & bind value.

    Like:

    <input type="checkbox" v-model="permissions" :value="permission.id" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search