求助：v-autocomplete组件无法设置默认值的原因排查

几个关键错误 #

• onMounted回调参数错误：onMounted的回调函数不会传入selectedMeal参数，你当前的写法等于在回调里新建了一个局部变量，和模板中绑定的变量完全无关。
• 响应式变量处理错误：如果selectedMeal是普通const变量，直接赋值selectedMeal = props.table_meals不会触发Vue的响应式更新，模板根本感知不到值的变化；就算是响应式变量，直接替换整个数组引用也会破坏响应性。
• 数据匹配关系未验证：props.table_meals的数组长度要和datesOfWeek对应，且每个对象的id必须能在meals数组中找到匹配项——因为你设置了item-value="meal.id"，组件是靠这个id来识别对应选项的。

修复步骤 #

1. 将selectedMeal声明为响应式数组
   用Vue3的ref或reactive定义响应式变量：

   import { ref, onMounted } from 'vue';
   
   // 用ref声明响应式数组
   const selectedMeal = ref([]);
   

2. 正确在onMounted中赋值
   去掉错误参数，直接给响应式变量的value赋值：

   onMounted(() => {
       // 用展开运算符复制数组，保留响应式
       selectedMeal.value = [...props.table_meals];
       console.log(selectedMeal.value);
   });
   

   如果使用reactive：

   const selectedMeal = reactive([]);
   
   onMounted(() => {
       // 先清空原数组再添加新数据，避免直接替换整个数组破坏响应性
       selectedMeal.length = 0;
       selectedMeal.push(...props.table_meals);
   });
   

3. 验证数据匹配性
   检查props.table_meals中每个对象的id，确保在meals数组中存在对应项。若id不匹配，组件找不到对应选项，自然无法显示默认值。

4. 修复隐藏输入框的冲突
   你同时给v-text-field设置了:value="index"和v-model="form.date"，二者会产生冲突，v-model会覆盖:value的设置。建议改为在提交方法中传递索引：

   <v-autocomplete
       label="What sounds good?"
       :items="meals"
       item-title="meal.title"
       item-value="meal.id"
       return-object
       v-model="selectedMeal[index]"
       @update:modelValue="(val) => submitForm(val, index)"
   ></v-autocomplete>
   

   然后在方法中处理日期索引：

   const submitForm = (selectedMeal, dateIndex) => {
       form.date = dateIndex;
       // 其他提交逻辑
   };
   

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