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

Question

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

下面是调用无线电组件的父组件

<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

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

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