1.el-input cannot input problem
Reason 1. The el-input component is not bound to two-way responsive data (v-model)
Solution: Define a variable in data, and then use v-model in the el-input component for two-way data binding. This will solve the problem of the el-input component being unable to input.
Reason 2. The component is nested too deeply or the component is a pit (the specific reason is not clear, only the solution is known)
At this time, you will find that we have carried out two-way data binding, but el-input still cannot be input. We have to use the binding input event, and then use the $forceUpdate method to force refresh. This will solve the problem that our el-input cannot be input. problem, but this will bring up a new problem, that is, the form cannot be validated and other issues.
Solution steps
1. Use the input event to monitor user input. If there is no problem with monitoring input, it has nothing to do with HTML writing. 2. There is no problem with monitoring the input. Next, we will use the $forceUpdate method to force refresh. As for the form verification problem, we can use custom form verification to solve the problem of form verification failure caused by using the $forceUpdate method.
2. Form validation failure problem
- form validation rules
The form validation rule (this.rules in the picture) is an object. A certain variable you want to verify corresponds to an array. The trigger: "blur" in the array is triggered when the user loses focus. required: true , indicating that this parameter is required. After writing this attribute, a small red star will appear in front of the form item of the variable to be verified. If it is not filled in, it will not appear.
1.1. Fill in required: true
1.2. Do not fill in required:true
For example: when the attribute I want to verify is name, the verification rules defined in data are rules:{name:[{validator:validateForm},trigger:"blur",required:true]}, where validateForm is custom Validation function.
- custom validation function
表单验证规则失败后，value的值不能用来作为我们的判断依据了，因为该值不会变化，我们应该使用model绑定的表单中的值，利用该值我们就可以自定义表单校验了。