组件返回类型字符串而不是类型null的v-模型。

Question

链接到示例

我正在尝试创建一个Vue 3组件，它可以处理v模型绑定.组件包含一个简单的。

第一个包含带有内部文本‘默认占位符’的空值。其他的则包含实际值。

如果我尝试选择带有null值的选项，而不是返回null，它将返回内部文本‘默认占位符’。

我需要它返回null。

我可以获得空值(请参阅changeValue()方法)，但是使用event.target.selectedOptions._value感觉很麻烦。

如果我尝试构建相同的功能，而不使用使用v模型的自定义组件，那么它就会像预期的那样工作。

子组件

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    emits: ['update:modelValue'],
    methods: {
        changeValue(event) {
            // Output the event for testing purposes
            console.dir(event);
            console.log(event.target.value);
            console.dir(event.target.selectedOptions[0]);
            console.log(event.target.selectedOptions[0].text);
            // This is the correct value but im unsure if I can use it.
            console.log(event.target.selectedOptions[0]._value);
            console.log(typeof event.target.value);

            // Emit the handler
            this.$emit('update:modelValue', event.target.value);
        }
    },
    name: 'HtmlSelect',
    props: ['modelValue'],
})
</script>
<template>
    <select :value='modelValue' @input="changeValue">
        <option :value="null">Should be null. Get inner text.</option>
        <option :value="1">Number: 1</option>
        <option value="1">String: 1</option>
        <option :value="'Some Text'">String: Some Text</option>
    </select>
</template>

父实例没有执行任何特殊操作。

父组件

<html-select v-model="someVal"></html-select>

**编辑**我简化了示例组件，以更好地说明错误。添加了一个工作示例的链接。

Answer 1

这与<option>如何给出一个值有关。null是没有值的。如果选项的值为空，则返回开始标记和结束标记之间的文本。尝试使用"0"而不是null，检查"0"，而不是null，如果确实需要null，则用null替换"0"

Answer 2

如果需要保留原始类型的值，则必须在组件中使用计算的getter / setter以及v模型绑定。

这里的演示

工作守则

export default defineComponent({
    computed: {
        value: {
            get() {
                return this.modelValue;
            },
            set(value: any) {
                this.$emit('update:modelValue', value);
            }
        }
    },
    data() {
        return {
            selectOptions: {
                'Null Option': null,
                'Numeric Option': 1,
                'String Option': 'String'
            }
        }
    },
    emits: ['update:modelValue'],
    name: 'HtmlSelect',
    props: {
        modelValue: {
            type: String,
            default: null
        }
    },
    template: '<select v-model="value">' +
        '<option v-for="(option, i) in selectOptions" :value="option">{{ i }}</option>' +
        '</select>'
})