laravel 9 vue 3 edit multiple checked checkbox value

Viewed 15

when editing a checkbox array, I cannot select (checked) that are in the database how to select those that exist in the checkbox database (checked) ? please, help

Edit.vue

<template>

    <div>

        <admin-layout>

            <template #header>

                <div class="row">

                    <div class="col-md-12">

                        <h4>Емделуші</h4>

                    </div>

                </div>

            </template>



            <div class="row">

                <div class="col-md-12 mb-3">

                    <div class="card">

                        <div class="card-header">

                            <span><i class="bi bi-table me-2"></i></span> Емделушіні өзгерту

                            <div class="card-header-pills float-end">

                                <inertia-link :href="route('admin.schedules.index')" class="btn btn-primary text-white text-uppercase" style="letter-spacing: 0.1em;">

                                    Кері қайту

                                </inertia-link>

                            </div>

                        </div>

                        <form @submit.prevent="updateSchedule">

                            <div class="card-body">

                                <div class="mb-3">

                                    <label for="name" class="form-label">Аты-жөні</label>

                                    <input type="text" class="form-control" id="name" v-model="form.name" :class="{'is-invalid' : form.errors.name }" autofocus="autofocus" autocomplete="off">

                                </div>

                                <div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.name }">

                                    {{ form.errors.name }}

                                </div>

                                <div class="mb-3">

                                    <label class="form-label" for="email">Email</label>

                                    <input type="text" class="form-control" id="email" v-model="form.email" :class="{'is-invalid' : form.errors.email }" autofocus="autofocus" autocomplete="off">

                                </div>

                                <div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.email }">

                                    {{ form.errors.email }}

                                </div>

                                <div class="mb-3">

                                    <label class="form-label" for="phone">Телефон</label>

                                    <input type="text" class="form-control" id="phone" v-model="form.phone" :class="{'is-invalid' : form.errors.phone }" autofocus="autofocus" autocomplete="off">

                                </div>

                                <div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.phone }">

                                    {{ form.errors.phone }}

                                </div>



                                <div class="form-check form-check-inline" v-for="(time, index) in times" :key="index">

                                    <input class="form-check-input" type="checkbox" id="inlineCheckbox1" :value="time.time" v-model="form.times" :class="{'is-invalid' : form.errors.times }">

                                    <label class="form-check-label" for="inlineCheckbox1">{{ time.time }}</label>

                                </div>



                                <div class="invalid-feedback mb-3" :class="{ 'd-block' : form.errors.times }">

                                    {{ form.errors.times }}

                                </div>



                            </div>

                            <div class="card-footer clearfix">

                                <div class="float-end">

                                    <jet-button class="ms-4 btn-primary text-white" :class="{ 'text-white-50': form.processing }" :disabled="form.processing">

                                        <div v-show="form.processing" class="spinner-border spinner-border-sm" role="status">

                                            <span class="visually-hidden">Өзгертілуде...</span>

                                        </div>

                        Өзгерту

                        </jet-button>

                    </div>

                </div>

                </form>

                    </div>

                </div>

            </div>



        </admin-layout>

    </div>

</template>



<script>

    import AdminLayout from '@/Layouts/AdminLayout';

    import JetButton from '@/Jetstream/Button.vue'

    import { useForm } from '@inertiajs/inertia-vue3';

    import InertiaLink from "@inertiajs/inertia-vue3/src/link";



    export default {

        name: "Edit",



        components: {

            AdminLayout,

            JetButton,

            InertiaLink,

        },



        props: {

            appointment: {},

            times: {},

        },



        setup (props) {

            const form = useForm({

                name: props.appointment.name,

                email: props.appointment.email,

                phone: props.appointment.phone,

                times: props.times,

            });



            return {

                form,

            }

        },



        methods: {

           

            },





        }

    }

</script>

when editing a checkbox array, I cannot select (checked) that are in the database how to select those that exist in the checkbox database (checked) ? please, help

0 Answers
Related