Table of contents
2. Correct case and wrong principle:
1. Problem discovery:
The author used elementui+vue technology when making the front end of the login page, and found that the input box cannot enter any content.
After consulting many articles on csdn, I found that I couldn't solve it, so I went to the official website of elementui to check repeatedly and found the problem. In the end, it was found that the problem was that the v-model in the input tag was written improperly, which made it unable to take effect/forgot to write the v-model. If you have the same problem, you can read this article and it may help solve your problem . The following solution is for reference.
2. Correct case and wrong principle:
Check the official website for the use instructions of the Form column. The official website first gives a classic case, which includes the function we need to "successfully realize the input requirements in the form". For example, the Activity form in the figure below:
...Other functions in the middle are omitted for ease of viewing, and only important content is captured.
It can be found that the important point is that writing <el-input> in <el-form> must define v-model in the input tag, specifically v-model: form model. input content name . And after that, it is necessary to initialize the attributes in the table model, otherwise an error will still be reported.
3. Problem solving
The first case: the official website can solve
You can first try to use the writing method given on the above official website, import reactive in the subsequent <script>, and then use const form to initialize. If no error is reported, the input function can be successfully realized, as shown in the official website demonstration.
The second case: the official website cannot be resolved, the page still cannot be displayed, and the npm console reports a Warning , and the content of the Warning is: export default (reexported as default ) was not found in -!..
This problem is mainly in <script>. Due to version and other issues, the vue file does not support the writing method of the official website, that is, import {reactive} from 'vue' cannot be used. This is also the problem the author encountered. Here is a solution for me: use the data attribute in the script tag to return the table to initialize the content. The login in this figure is the name of the table defined in my own development process, which is equivalent to the form on the official website, username and password are equivalent to the attributes that the table needs to input, and the v-model in the input tag still uses v-model: form model. Input The format of the content name .
The final effect is as follows. You can already enter content in the input field. The reason why the two inputs in the form are on the same line is that the inline:true inline attribute is added to the form:
Hope that solves your problem, thanks for reading.