如何在Vue3+Inertia+Laravel中让下拉菜单显示默认选项？

排查核心原因 #

下拉菜单v-model绑定不生效，本质是**form.frequency的值和选项的value无法严格匹配**，按以下步骤排查解决：

1. 检查后端返回的频率值是否匹配
   在<script setup>中添加打印语句，确认props.income.frequency的实际内容：

   console.log('frequency值:', props.income.frequency, '类型:', typeof props.income.frequency)
   

   需确保该值与选项的value完全一致：

   • 字符串大小写必须完全匹配（比如后端返回"Monthly"会和"monthly"不匹配）
   • 数据类型必须一致（比如后端返回数字1，而选项value是字符串"monthly"，无法匹配）

2. 处理空值或字段缺失的情况
   如果后端返回的income可能为空，或frequency字段不存在，初始化表单时要设置默认值：

   const form = useForm({
     description: props.income?.description || '',
     amount: props.income?.amount || '',
     day_deposited: props.income?.day_deposited || '',
     frequency: props.income?.frequency || 'monthly', // 默认选中第一个选项
   })
   

3. 适配异步加载的props数据
   若props.income是异步加载的，初始化表单时可能还未拿到数据，可通过监听props变化更新表单：

   import { watch } from 'vue'
   import { useForm } from '@inertiajs/vue3'
   
   const props = defineProps({
     income: Object,
   })
   
   const form = useForm({
     description: '',
     amount: '',
     day_deposited: '',
     frequency: 'monthly', // 默认值
   })
   
   watch(() => props.income, (newIncome) => {
     if (newIncome) {
       form.fill({
         description: newIncome.description,
         amount: newIncome.amount,
         day_deposited: newIncome.day_deposited,
         frequency: newIncome.frequency || 'monthly',
       })
     }
   }, { immediate: true })
   

4. 移除手动selected属性
   v-model会自动管理选中状态，手动添加selected会与v-model冲突，直接删除该属性即可。

快速验证方法 #

临时给form.frequency硬编码有效值（比如frequency: 'monthly'），若下拉菜单能正常选中第一个选项，说明问题出在后端返回的数据匹配上。

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