我有一个<select>元素，我想将它v-model绑定到Vue.js 3的setup()方法中的ref值。因此，当用户选择不同的选项时，Form.ProductID引用会更新。
下面是<select>代码：
<select v-model="Form.ProductID" id="ProductID" name="ProductID">
<option value="1">Option A</option>
<option value="2">Option B</option>
<option value="3">Option C</option>
</select>和setup()
export default {
name: "ComponentProductSelector",
setup() {
const Form = ref({
ProductID: '2',
Price: null,
Currency: null
})
onMounted(() => Form.value.ProductID)
document.querySelector("#ProductID option:first-of-type")
}
}在vue devtools中第一次加载时，它将数据显示为：
Form (Object Ref)
ProductID: "[object HTMLOptionElement]"当我在<select>元素中选择一个选项时，Form.ProductID会按预期更新，并显示我选择的选项，例如：
Form (Object Ref)
ProductID: 3问题是，在第一次加载页面时，<select>元素没有使用value="2"选择选项，即使我在setup()中对其进行了硬编码。它只显示一个空白选项！但是，如果我将<select>元素更改为以下代码，它就会这样做：
<select ref="Form.ProductID" id="ProductID" name="ProductID">
<option value="1">Option A</option>
<option value="2">Option B</option>
<option value="3">Option C</option>
</select>现在，当呈现组件时，默认情况下会选择带有value="2"的选项，但是Form.ProductID的实际值不会更新，并且vue devtools会继续将ProductID: "[object HTMLOptionElement]"显示为数据。
如何使用v-model让<select>元素工作，并在组件加载时选择默认选项？
转载请注明出处:http://www.4008202667.com/article/20230328/1033213.html