CODEWITHSUNDEEP
javascriptvue.jsvuejs2nuxt.js
Opeyemi Odedeyi
Opeyemi Odedeyi

Reputation: 770

vue radio boxes returning string instead of boolean

I have a reusable radio box that is supposed to return true or false depending on which radio box is selected. the problem is that it returns a string instead of a boolean and I have no idea why this behavior is so.

below is the parent component that calls the radio component

<radioinput name="yes" :value="true" v-model="form.time.alwaysopen">Yes</radioinput>
<radioinput name="no" :value="false" v-model="form.time.alwaysopen">No</radioinput>

form: {
    time: {
        alwaysopen: true,
        open: null,
        close: null
    }
}

below is the radio component that is called

<template>
    <label :for="name" class="inline-form radio">
        <slot></slot>
        <input type="radio" :name="name" :id="name" class="radio-input" :checked="isChecked" :value="value" @change="$emit('change', $event.target.value)">
        <div class="radio-radio"></div>
    </label>
</template>

export default {
    model: {
        prop: 'modelValue',
        event: 'change'
    },
    props: {
        name: {
            type: String,
            required: true
        },
        value: {
            type: Boolean,
            default: true
        },
        modelValue: { 
            type: Boolean,
        },
    },
    computed: {
        isChecked() {
            return this.modelValue == this.value
        }
    }
}

Please what could be the issue?

Upvotes: 0

Views: 866

Answers (1)

kdau
kdau

Reputation: 2099

When you emit the change event from your radio component, you're taking $event.target.value, which is the HTMLInputElement.value property that is always a string. In order to emit the boolean value prop itself, you should refer to it directly in the @change handler like this:

<input type="radio" :name="name" :id="name" class="radio-input" :checked="isChecked" :value="value" @change="$emit('change', value)">

Upvotes: 3

Related Questions