Form validation may have problem records
Daily development minor problems are recorded in essays, which is convenient for subsequent reference.
Form data binding input value is inconsistent with validation input binding value
The scene where the problem occurs: the object bound to the vue form form, the value bound to the corresponding item is inconsistent with the value of the custom verification object, resulting in:
<template>
<el-form :model="formLabel" :rules="formRules" label-width="80px">
<el-form-item label="部门" prop="department">
<el-input v-model="formLabel.department"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="areat">
<el-input v-model="formLabelAlign.activeareat"></el-input>
</el-form-item>
<el-form-item label="活动形式" prop="ruleType">
<el-input v-model="formLabelAlign.activeType"></el-input>
</el-form-item>
</el-form>
</template>
<script setup>
import {
reactive, ref } from 'vue';
const formRules = reactive({
department: [{
required: true, message: '请输入部门', trigger: 'blur' }],
areat: [{
required: true, message: '请输入活动区域', trigger: 'blur' }],
ruleType: [{
required: true, message: '请输入活动形式', trigger: 'blur' }],
});
const formLabel = ref({
department: '',
activeareat: '',
activeType: '',
});
</script>
<style lang="less"></style>
Just modify the corresponding key in the formRules object to be consistent with the key of the formLabel object;
<template>
<el-form :model="formLabel" :rules="formRules" label-width="80px">
<el-form-item label="部门" prop="department">
<el-input v-model="formLabel.department"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="activeareat">
<el-input v-model="formLabelAlign.activeareat"></el-input>
</el-form-item>
<el-form-item label="活动形式" prop="activeType">
<el-input v-model="formLabelAlign.activeType"></el-input>
</el-form-item>
</el-form>
</template>
<script setup>
import {
reactive, ref } from 'vue';
const formRules = reactive({
department: [{
required: true, message: '请输入部门', trigger: 'blur' }],
activeareat: [{
required: true, message: '请输入活动区域', trigger: 'blur' }],
activeType: [{
required: true, message: '请输入活动形式', trigger: 'blur' }],
});
const formLabel = ref({
department: '',
activeareat: '',
activeType: '',
});
</script>
<style lang="less"></style>
The form binding object does not initially have a corresponding bound value
The scene where the problem occurs: The form object bound to the main and subcomponents of the vue project is the object passed in by the parent component; the subcomponent is not synchronized to the object value corresponding to the parent component; the
parent component:
<template>
<div>
<Childern :project-opt="formLabel"></Childern>
</div>
</template>
<script>
export default {
data() {
return {
formLabel:{
}
};
},
created() {
this.formLabel = {
department: '',
activeareat: '',
activeType: '',
}
}
};
</script>
<style lang="less"></style>
Subassembly:
<template>
<el-form :model="formLabel" :rules="formRules" label-width="80px">
<el-form-item label="部门" prop="department">
<el-input v-model="formLabels.department"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="activeareat">
<el-input v-model="formLabelAlign.activeareat"></el-input>
</el-form-item>
<el-form-item label="活动形式" prop="activeType">
<el-input v-model="formLabelAlign.activeType"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
props: {
formLabel: {
type: Object,
},
},
data() {
return {
formLabels: this.formLabel,
formRules: {
department: [{
required: true, message: '请输入部门', trigger: 'blur' }],
activeareat: [{
required: true, message: '请输入活动区域', trigger: 'blur' }],
activeType: [{
required: true, message: '请输入活动形式', trigger: 'blur' }],
},
};
},
};
</script>
<style lang="less"></style>
Since the change of the object property value cannot be monitored in vue2, the child component does not receive the formLabel object property; change the value assigned to the formLabel by the parent component to:
this.$set(this.formLabel, 'department', '')
this.$set(this.formLabel, 'activeareat', '')
this.$set(this.formLabel, 'activeType', '')
problem solved