Vue.js中如何为含null值的Select组件设置默认选项？

我有一个绑定v-model的select组件，初始值为null，同时为默认选项指定null值时，默认值可正常显示。但将该select封装为独立组件后，null值的默认选项无法正常生效。

父组件调用代码（Parent.vue） #

<filter-trashed-select v-model="filters.trashed.fieldValue"/>

封装后的子组件代码（FilterTrashedSelect.vue） #

<template>
    <div class="reference__filter-select-wrapper">
        <select class="form-select" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
            <option :value="null">{{ $t('Only active') }}</option>
            <option value="only">{{ $t('Only hidden') }}</option>
            <option value="with">{{ $t('All') }}</option>
        </select>
    </div>
</template>

<script>
export default {
    name: "FilterTrashedSelect",
    props: ['modelValue'],
    emits: ['update:modelValue']
}
</script>

尝试过的解决方案 #

• 显式设置select的value为null

<template>
    <div class="reference__filter-select-wrapper">
        <select class="form-select" :value="null" @input="$emit('update:modelValue', $event.target.value)">
            <option :value="null">{{ $t('Only active') }}</option>
            <option value="only">{{ $t('Only hidden') }}</option>
            <option value="with">{{ $t('All') }}</option>
        </select>
    </div>
</template>

<script>
export default {
    name: "FilterTrashedSelect",
    props: ['modelValue'],
    emits: ['update:modelValue']
}
</script>

• 使用v-model的完整写法调用组件

<filter-trashed-select :modelValue="filters.trashed.fieldValue"
  @update:modelValue="newValue => filters.trashed.fieldValue= newValue"/>

• 将select直接写在父组件中，功能正常

已在Vue SFC Playground制作简化复现示例。

最终解决方案 #

问题根源在于直接将props的modelValue绑定到select的:value上，原生select对null值的处理和Vue响应式机制存在冲突。需要在组件内部通过data变量中转，使用v-model绑定内部变量，再同步到父组件：

<template>
  <select v-model="test" @change="$emit('update:modelValue', $event.target.value)">
    <option :value="null">null</option>
    <option value="1">1</option>
  </select>
</template>
<script>
export default {
  props: ["modelValue"],
  emits: ["update:modelValue"],
  data() {
    return {
      test: this.modelValue
    }
  }
};
</script>

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