Vue3下拉选择框默认值无法正确设置的技术求助

我看了你的代码，问题主要出在响应式变量的声明方式和异步操作的执行顺序上，下面一步步给你解决：

1. 修复响应式变量的声明 #

你当前的selectedCategory是先用let声明，然后在异步函数里才赋值为ref对象，这会导致两个问题：

• 初始渲染时，selectedCategory不是响应式的ref，Vue无法追踪它的变化
• 异步赋值后，模板绑定的变量引用已经和你后来创建的ref对象不一致了

正确的做法是一开始就把它声明为ref响应式变量：

// 初始值可以设为null，或者你期望的默认分类ID
const selectedCategory = ref(null)

然后在getSingleProduct里直接修改它的.value属性，而不是重新赋值：

const getSingleProduct = async () => { 
  let response = await axios.get(`/api/get_edit_product/${props.id}`) 
  form.value = response.data.product 
  // 直接修改ref的value，而不是重新赋值整个变量
  selectedCategory.value = form.value.category_id 
}

2. 确保异步操作的执行顺序 #

getCategories和getSingleProduct都是异步函数，如果getSingleProduct先执行完成，此时categories还没加载完毕，下拉选项还没渲染出来，设置默认值自然不会生效。

你需要在组件挂载时，先加载分类数据，再加载产品数据：

import { onMounted } from 'vue'

onMounted(async () => {
  // 先获取所有分类，确保下拉选项存在
  await getCategories()
  // 再获取产品数据并设置默认选中项
  await getSingleProduct()
})

3. 检查类型匹配（可选但重要） #

还要确认form.value.category_id和category.id的数据类型完全一致：

• 如果后端返回的category.id是字符串，而form.value.category_id是数字，会导致匹配失败
• 可以统一类型，比如把选中值转成字符串：

  selectedCategory.value = String(form.value.category_id)
  

  或者在option的:value里转成数字：

  <option v-for="category in categories" :key="category.id" :value="Number(category.id)">
    {{ category.name }}
  </option>
  

做完这些修改后，你的下拉选择框应该就能正确选中预设的默认选项了。

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