Vue3 script setup中select组件prop为null时无法预选‘Any’问题

核心问题：v-model与:selected属性冲突 #

Vue 3的<select>组件通过v-model实现双向绑定，它会自动根据绑定值匹配选项的value来控制选中状态。如果你同时手动设置:selected属性，两者的控制逻辑会发生冲突，导致你看到的“判断返回true但选项未被预选”的问题——v-model的优先级更高，会覆盖手动设置的:selected状态。

修正步骤 #

1. 移除:selected判断
   完全删除<option>上的:selected属性，让v-model全权负责选中状态的控制。

2. 确保绑定值与选项value匹配
   确认selectedStatus的初始值和“Any”选项的value完全一致。比如你的statusOptions应该定义为：

   const statusOptions = [
     { label: 'Any', value: null },
     // 其他状态示例
     { label: 'Active', value: 'active' },
     { label: 'Inactive', value: 'inactive' }
   ];
   

3. 正确处理Props与绑定值
   由于Props是只读的，不能直接绑定到v-model，需要在组件内部做一层中转：

   <script setup>
   import { ref, watch } from 'vue';
   const props = defineProps({
     status: {
       type: [String, null],
       default: null
     }
   });
   const emit = defineEmits(['update:status']);
   
   // 用ref中转Props值，实现双向绑定
   const selectedStatus = ref(props.status);
   
   // 同步选中值到父组件
   watch(selectedStatus, (newVal) => {
     emit('update:status', newVal);
   });
   </script>
   

4. 简化模板代码
   模板只保留v-model和选项循环即可：

   <template>
     <select v-model="selectedStatus">
       <option 
         v-for="option in statusOptions" 
         :key="option.value" 
         :value="option.value"
       >
         {{ option.label }}
       </option>
     </select>
   </template>
   

为什么之前的判断不生效？ #

你通过VueDevtools看到Props的status为null，且:selected判断返回true，但v-model会在组件初始化时根据selectedStatus的当前值重新计算选中状态。如果selectedStatus没有正确同步Props的null值，或者v-model的绑定逻辑覆盖了手动设置的:selected，就会导致选项未被预选。移除:selected后，v-model会完全根据selectedStatus的值匹配对应选项，即可解决问题。

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