Ich stieß auf eine große Grube und es dauerte mehrere Stunden, das Problem zu finden.
Wenn vue3 el-form verwendet, führt der folgende Code dazu, dass das Eingabefeld nicht eingegeben werden kann, der Wert nicht zugewiesen werden kann und das Auswahlfeld nicht ausgewählt werden kann
<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
}
}Was löste es aus?
Dieses Problem tritt auf, weil die Referenzbenennung mit der des Modells übereinstimmt
Der Grund dafür ist, dass el-form ref="form" deklariert, was dazu führt, dass das im Status deklarierte Formular überschrieben wird. Wenn ein Konflikt vorliegt, ändern Sie ref="form1" oder model="formData" (Sie können diesen Namen wählen). beiläufig), um das Problem zu lösen
Warum kommt es also zu Konflikten? Ich weiß es nicht, bitte leiten Sie mich weiter. Wenn ich es weiß, werde ich es in Zukunft aktualisieren
Lösung
Da Sie nun den Konflikt kennen, besteht die Lösung darin, den Namen zu ändern.
Ich habe es wie folgt geändert und es kann normal ausgeführt werden
<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
}
}