Question

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

下面是调用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?

Answer 1

当您从无线电组件发出 image 事件时，您正在获取 change，即始终是字符串的 HTMLInputElement.value property。为了发出布尔值 $event.target.value 属性本身，您应该像这样直接在 value 处理程序中引用它：

@change

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

1 个答案: