动态默认选择选项

Question

我有编辑产品的组件，在

select

元素中我想将产品类别选项设置为默认选项，如果该产品类别名称等于正在循环的类别数组中的名称，那么我想要该选项默认情况下会被选中，但它没有按预期工作。

const props = defineProps({
 product: Object, 
 categories: Object 
});

const form = useForm({
    category: "",
});



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

Answer 1

export default {
  props: {
    product: Object,
    categories: Array,
  },
  setup(props) {
    const form = ref({
      category: props.product.category || '', // Set the default value based on product.category
    });

    return { form };
  },
};