Encontré un gran hoyo y me tomó varias horas encontrar el problema.
Cuando vue3 usa el-form, el siguiente código hará que el cuadro de entrada no pueda ingresar, el valor no se pueda asignar y el cuadro de selección no se pueda seleccionar
<el-form class="my-form" ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="form.date"
style="width: 100%;"
value-format="YYYY-MM-DD"
></el-date-picker>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form> setup() {
const state = reactive({
form: {
name: '1',
date: '',
desc: ''
}
})
function onSubmit() {
}
return {
...toRefs(state),
onSubmit
}
}¿Qué lo causó?
Este problema se produce porque el nombre de referencia es el mismo que el del modelo.
La razón es que el-form declara ref="form", lo que hace que se sobrescriba el formulario declarado en el estado. Si hay un conflicto, modifique ref="form1" o model="formData" (puede elegir este nombre casualmente) para resolver el problema
Entonces, ¿por qué entran en conflicto? No lo sé, por favor guíame, si lo sé, lo actualizaré en el futuro.
Solución
Ahora que conoces el conflicto, la solución es cambiar el nombre.
Lo modifiqué para que sea el siguiente y se puede ejecutar normalmente.
<el-form class="my-form" ref="form" :model="formData" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="formData.date"
style="width: 100%;"
value-format="YYYY-MM-DD"
></el-date-picker>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="formData.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>setup() {
const state = reactive({
formData: {
name: '1',
date: '',
desc: ''
}
})
function onSubmit() {
}
return {
...toRefs(state),
onSubmit
}
}