vue 单选框返回字符串而不是布尔值答案

【问题标题】：vue radio boxes returning string instead of booleanvue 单选框返回字符串而不是布尔值
【发布时间】：2021-06-13 04:17:43
【问题描述】：

我有一个可重复使用的单选框，它应该根据选择的单选框返回真或假。问题是它返回一个字符串而不是布尔值，我不知道为什么会这样。

下面是调用radio组件的父组件

<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
    }
}

下面是调用的无线电组件

<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?

【问题讨论】：

标签： javascript vue.js vuejs2 nuxt.js

【解决方案1】：

当您从无线电组件发出change 事件时，您将获得$event.target.value，即始终为字符串的HTMLInputElement.value property。为了发出布尔值 value 本身，您应该直接在 @change 处理程序中引用它，如下所示：

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

【讨论】：