Vue3自定义select表单组件v-model返回值类型不符问题求解

核心问题根因 #

1. 原生HTML的<option>标签的value属性仅支持字符串类型，任何非字符串类型（布尔值、数字、对象等）绑定后都会被强制转为字符串，这是你选择Active时布尔值true变成字符串"true"的直接原因。
2. 你原有代码中option的:value绑定逻辑存在真值判断缺陷：option.value ? option.value : option，当value为布尔值false时会被判定为假值，导致直接绑定整个option对象，这是选择Inactive时返回类型不符合预期的原因。
3. 组件props中options的类型声明错误，你声明的是Object但实际传入的是数组，会触发Vue的类型校验警告。

修复方案 #

我们通过绑定索引代替直接绑定值，选中后从原始options数组中取对应值的方式保留原始类型，同时修正取值判断逻辑：

第一步：修正props定义 #

将options的类型从Object改为Array：

props: {
    // 其他props不变
    options: {
        type: Array,
        required: true
    }
}

第二步：修改template中option的绑定逻辑 #

将option的:value绑定为索引，避免值被强制转义：

<option
    v-for="(option, index) in options"
    :value="index"
    :key="option.id ? option.id : index"
>
    {{ option.name ? option.name : option }}
</option>

第三步：重写updateSelect方法 #

通过选中的索引获取原始option，再按规则取值返回：

const updateSelect = (event) => {
    const selectedIndex = Number(event.target.value)
    const selectedOption = props.options[selectedIndex]
    // 改用属性存在性判断，避免假值被误判
    let emitValue
    if ('id' in selectedOption) {
        emitValue = selectedOption.id
    } else if ('value' in selectedOption) {
        emitValue = selectedOption.value
    } else {
        emitValue = selectedOption
    }
    emit("update:modelValue", emitValue)
}

完整修改后的组件代码 #

<template>
    <div class="col">
        <div class="row mb-4">
            <label class="col-sm-4 col-form-label col-form-label-sm">{{ label }}</label>
            <div class="col-sm-8">
                <select
                    class="form-select form-select-sm"
                    :class="{'is-invalid': error}"
                    :disabled="disabled"
                    :value="modelValue"
                    @change="updateSelect"
                >
                    <option
                        v-for="(option, index) in options"
                        :value="index"
                        :key="option.id ? option.id : index"
                    >
                        {{ option.name ? option.name : option }}
                    </option>
                </select>
                <div class="invalid-feedback" v-if="error"> {{ error }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "SelectForm",
    props: {
        label: {
            type: String,
            default: "",
        },
        modelValue: {
            type: [String, Number, Boolean],
            default: "",
        },
        error: {
            type: String,
            default: ""
        },
        disabled: {
            type: Boolean,
            default: false
        },
        options: {
            type: Array,
            required: true
        }
    },
    setup(props, { emit }) {
        const updateSelect = (event) => {
            const selectedIndex = Number(event.target.value)
            const selectedOption = props.options[selectedIndex]
            let emitValue
            if ('id' in selectedOption) {
                emitValue = selectedOption.id
            } else if ('value' in selectedOption) {
                emitValue = selectedOption.value
            } else {
                emitValue = selectedOption
            }
            emit("update:modelValue", emitValue)
        }

        return {
            updateSelect
        }
    }
}
</script>

<style scoped>

</style>

修改后即可正常返回布尔值类型的选中结果，兼容你提供的所有options格式。

内容的提问来源于stack exchange，提问作者calin24