Vue自定义select组件绑定null值时UI不更新问题排查

自定义<select-vue>组件绑定v-model="group.billing_waiting_period"，当该属性初始值为null时，选择下拉选项后UI无法同步更新。以下是问题原因分析及修复方案：

问题原因 #

• props默认值不匹配：组件value prop默认值为''，但初始值是null，导致初始状态判断混乱
• 仅在挂载时处理初始值：onMounted中只设置一次defaultValue，后续value变化时未同步更新
• select选中状态处理冲突：同时使用:value和:selected，Vue的双向绑定逻辑被干扰
• 不必要的JSON解析：枚举值是字符串类型，JSON.parse会报错，导致input事件未正确触发

修复方案 #

修改select.vue组件代码 #

模板部分（简化选中状态逻辑）

移除option上的:selected，让Vue通过select的:value自动管理选中状态：

<template>
  <div class="relative">
    <label
      :for="$attrs.name"
      class="block text-sm font-medium leading-6 text-gray-900"
      >{{ $t($attrs.label) }} {{ required ? '*' : '' }}</label
    >
    <i
      v-if="!disabled"
      class="fa-light absolute right-3 top-11 fa-chevron-down"
    ></i>
    <select
      @input="changed"
      :value="value"
      :disabled="disabled"
      :class="errorInputStyle"
      v-bind="$attrs"
      class="mt-2 appearance-none disabled:cursor-not-allowed disabled:bg-gray-100 outline-none disabled:text-gray-600 disabled:ring-gray-200 bg-white block shadow w-full rounded-md border-0 py-2 pl-3 pr-10 ring-1 ring-inset focus:ring-2 sm:text-sm sm:leading-6"
    >
      <!-- 占位选项：当value为null/未匹配选项时显示 -->
      <option :value="null" disabled>
        {{ $t($attrs.placeholder) || 'Bitte auswählen' }}
      </option>
      <option
        :value="option.value"
        v-for="option in options"
        :key="option.value"
      >
        {{ $t(option.text) }}
      </option>
    </select>

    <p :class="errorDescriptionStyle" class="mt-2 text-sm">
      {{ $t($attrs.description) }}
    </p>
  </div>
</template>

脚本部分（修复props和逻辑）

<script lang="ts">
import { computed } from 'vue'
import { BaseOptionT } from '~/types'

export default {
  props: {
    value: {
      type: [String, Null], // 允许null类型
      default: null, // 默认值改为null，匹配初始状态
    },
    options: {
      type: Array as () => BaseOptionT[],
      default: () => [],
    },
    required: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isError: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, { emit }) {
    function changed(e: Event) {
      const target = e.target as HTMLSelectElement
      // 枚举值是字符串，无需JSON.parse，直接返回值
      emit('input', target.value)
    }

    const errorDescriptionStyle = computed(() => [
      props.isError ? 'text-red-500' : 'text-gray-500',
    ])

    const errorInputStyle = computed(() => [
      props.isError
        ? 'text-red-900 ring-red-300 placeholder:text-red-300  focus:ring-red-600'
        : 'text-gray-900 ring-gray-300 placeholder:text-gray-300  focus:ring-green-600',
    ])

    return {
      changed,
      errorDescriptionStyle,
      errorInputStyle,
    }
  },
}
</script>

额外注意事项 #

• 如果group是父组件传入的prop，修改group.billing_waiting_period时需要确保父组件能响应式更新（比如在父组件中用$emit修改父级数据，或者将group转为ref/reactive对象）
• 枚举选项生成逻辑保持不变，确保option.value与枚举值完全匹配

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