Make a checkbox selection default out of a group

Question

I want to make the second checkbox always selected by default even on page reload like the image-

The user can select other checkboxes later but by default, the second should be selected always.

Here is the checkbox code-



    export default {
        props: {
            admissionRequestId: {
                required: true,
            }
        },

        data() {
            return {
                admissionRequestObj: new AdmissionRequest(),
                obj: new Admission(),
                wards: null,
                saveLoader: false,
                beds: [],
                charges: [],
                wardCashCharge: null,
                wardInsuranceCharge: null,
                today: moment(new Date()).format('YYYY-MM-DD HH:MM:ss'),
                overbookingAllowed: false,
                generating: false,
            }
        },

        computed: {
            ...mapGetters([
                'getWards',
            ]),

            admissionRequest() {
                return this.admissionRequestObj.selected
            },

            initialised() {
                return this.wards && this.admissionRequest
            },

            saved() {
                return this.obj.saved
            },

            submitted() {
                return this.obj.form.submitted
            },

            contaminated() {
                return this.obj.form.errorDetected;
            },

            errors() {
                return this.obj.form.errors;
            },

            generatedIpNuber() {
                return this.obj.generatedIpNuber
            }
        },

        watch: {
            contaminated(val) {
                if(val) {
                    this.saveLoader = false
                }
            },

            submitted(val) {
                if(val) {
                    this.saveLoader = false
                }
            },

            saved(val) {
                if(val) {
                    this.saveLoader = false
                    this.dialog = false

                    window.location = route('inpatient.admissions.index').relative()
                }
            },

            admissionRequest(val) {
                if(val) {
                    this.obj.admission.admission_request_id = val.id
                    this.obj.admission.visit_id = val.visit_id
                    this.obj.admission.inpatient_no = val.visit.patient.inpatient_no
                    this.obj.admission.patient_id = val.visit.patient.id
                }
            },

            getWards(val) {
                if(val) {
                    this.wards = this.getWards.data
                }
            },

            generatedIpNuber(val) {
                this.generating = false
                if(val)
                    this.obj.admission.inpatient_no = val
            }
        },

        methods: {
            ...mapActions([
                'setWards',
            ]),

            initialise() {
                this.admissionRequestObj.find(this.admissionRequestId)

                this.setWards()

                this.obj.admission.admission_date = this.today

                this.overbookingAllowed = this.$options.methods.msetting('inpatient.allow_overbooking_of_wards') == 1
            },

            updateBeds() {
                let ward = _.find(this.wards, {id: this.obj.admission.ward_id})

                this.wardCashCharge = ward.cash_cost
                this.wardInsuranceCharge = ward.insurance_cost

                this.beds = _.map(ward.beds, item => {
                    let name = "Bed No. " + item.number
                    ! item.is_available ? name += " (Unavailable)" : '';

                    let disabled = ! item.is_available
                    this.overbookingAllowed ? disabled = false : null

                    return {
                        name: name,
                        id: item.id,
                        disabled: disabled
                    }
                })

                let firstAvailableBed = _.find(this.beds, { disabled: false })
                firstAvailableBed ? this.obj.admission.bed_id = firstAvailableBed.id : null

                if(this.charges && this.charges.length && this.charges.length >=2) {
                      // charges[1] = second item
                     this.obj.admission.charges.push(this.charges[1].id)
                  }

                this.charges = _.map(ward.charges, item => {
                    let name = item.name + " - Kshs. " + item.cost;
                    item.type == 'recurring' ? name += " [RECURRING]" : '';

                    return  {
                        id: item.id,
                        name: name
                    }
                })
            },

            setDoctor(doctor) {
                this.obj.admission.doctor_id = doctor.id
                this.obj.admission.doctor_name = doctor.full_name
            },

            unsetDoctor() {
                this.obj.admission.doctor_id = null
                this.obj.admission.doctor_name = null
            },

            generateIpNumber() {
                this.generating = true
                this.obj.generateInpatientNumber()
            },

            setAdmissionDate(datetime) {
                this.obj.admission.admission_date = datetime
            },

            save() {
                this.saveLoader = true
                this.obj.save()
            }

        },

        mounted() {
            this.initialise()
        }
    }

The api data looks like-

When I select bed, I call a method to fetch the charges. Thats where I have placed the code to select the admission charge where second charge item should always be selected.

Neha Soni · Accepted Answer

If you only want to keep the second item by default selected, then on the mounted hook, just find the second item's id in your charges array, and push this id to your v-model variable (obj.admission.charges) and you should see that the second item is always selected.

Here is the demo-

NOTE- I used your API data inside the data property of Vue as I can't send requests to your server. I also assumed the possible structure of obj.admission because you didn't mention it.

Make a checkbox selection default out of a group

Answers (1)

Related Questions