Vue组件select默认选中产品分类失效问题求助

你的问题出在v-model和:selected属性冲突——Vue中v-model会完全接管<select>的选中状态，手动设置的:selected会被v-model的值覆盖，所以当前写法不会生效。

正确实现步骤： #

1. 初始化表单时设置默认值
   不需要用:selected，直接在useForm初始化时把category设为product.category的值即可。
2. 修正props类型（可选但重要）
   你定义的categories类型是Object，但它应该是数组类型，否则v-for遍历会出现异常。

修正后的代码： #

const props = defineProps({
  product: {
    type: Object,
    required: true // 确保产品数据必传
  },
  categories: {
    type: Array, // 修正为数组类型
    required: true
  }
});

// 初始化表单时直接设置产品的分类作为默认值
const form = useForm({
  category: props.product?.category || "" // 用可选链处理product为空的边界情况
});

<select v-model="form.category">
  <option v-for="category in categories" :value="category.name">
    {{ category.name }}
  </option>
</select>

额外优化建议： #

• 如果分类有唯一ID，建议用category.id作为:value，而非名称——名称可能存在重复，ID的唯一性更可靠，同时product.category也要对应存储ID值。
• 确保product和categories是响应式数据，若为异步获取，Vue会自动更新表单选中状态，无需额外处理。

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