1.Dialog->Form->el-input cannot enter content

  • Fault Description: Data is obtained during editing operations, but the input box cannot input the content.

  • Possible cause: Vue could not refresh the view because of deep nesting

  • Solution:

<el-input v-model.number="number" placeholder=" @input="forceInput" ></el-input>... methods:{ forceInput(){ this.$forceUpdate(); // Force the view to refresh. This method is required for every input box that cannot be entered}}Copy the code

2. This.$refs gets empty/cannot reset form data

  • Description: When using El-Uplaod and El-Form, you need to use the method provided by Element to reset data, but the DOM cannot be retrieved or the reset data fails.

  • Cause of the problem:

    1. There is logic to determine whether to display the element or not. Ref is not bidirectionally bound, so the node is not rendered, so the fetch is empty.

    2. Data is already assigned at created time (for example, if you open a form and assign a value to the input field for an edit operation, then the assignment is done at created time). This.$refs.form.resetfield () method does not reset the form data

  • Solution: Use this.$nextTick() to leave the assignment until the DOM rendering is complete, and then use @close to reset the form data when the Dialog is closed.

 this.$nextTick(() => {
    this.updateInfoForm.infoName = item.name;
    this.updateInfoForm.infoEmail = item.email;
});
Copy the code
  • This.$nextTick()

3. Cancel el-upload upload/display animation

  • Problem description: Binding :file-list displays pictures, even if there is no picture will appear animation.
  • Solution: Unanimate styles so you can enjoy image preview/download.
.el-upload-list__item { transition: none ! important; }Copy the code

4. Display the start and end dates of el-date-picker

  • Problem description: After the selection of start and end dates, there is an array, and then there are the start and end dates returned respectively. The data needs to be processed.
  • The date cannot be displayed in the selector due to improper processing.
StartTime :2020-01-05 endTime:2020-02-03 Assignment: Date[0] = startTime; Date[1] = endTime;Copy the code

Selector displays result: The assignment did succeed, but cannot be displayed

  • Solution:
Date = [startTime, endTime];
Copy the code

Selector display result: The date is displayed successfully

5. After the Vue project and Nginx deployment go online, the 404 page is displayed

  • Symptom: The router uses the history mode. After the deployment is refreshed, the route cannot be found and 404 is displayed
  • Solution:

1. Remove the history mode.

2. Configure nginx to link to index.html when static paths are not found.

  • The nginx configuration of scheme 2 is as follows
server{
    listen 8081;
    server_name www.xxx.com:8081;
    root /data/xxx;
     indexindex.html; // The main content is the followinglocation / {
             try_files $uri $uri/ @router;
             index index.html;
         }
        location @router {
            rewrite^. * $ /index.html last; }}Copy the code

Special instructions

After this configuration, if the accessed route does not exist, you need to set the 404 page in vue-router(router/index.js), and no further configuration is required in ngxin.

{path: "*", // Pay special attention to the bottom redirect: "/NotFound"}Copy the code

6. El-form automatically triggers verification and displays the style

  • Problem description: When the form is just opened, some input boxes will display the verification success style after verification, and some will not display.

  • Solution:

1. Add some styles after successful validation.

.el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus { border-color:#67C23A } .el-form-item.is-success .el-input-group__append .el-input__inner, .el-form-item.is-success .el-input-group__prepend .el-input__inner { border-color:transparent } .el-form-item.is-success  .el-input__validateIcon { color:#67C23A }Copy the code

2. Modify the trigger mode in the verification rule, which must be written as trigger: [“blur”, “change”]

The result is as follows: opening the form automatically triggers validation.

Note: If there are other bugs on this page, the verification may not be triggered automatically. Second, automatic verification cannot be triggered if required:false itself is not required

7. El-upload component, verification prompt in the form will not be updated after successful upload/removal.

  • Solution: In el-upload’s hook function (on-success,on-remove), verify the image data separately.
this.$refs["formName"].validateField("imgName"); 
Copy the code

7. The vUE component name must be unique

Error in nextTick: “RangeError: Maximum Call stack Size exceeded” will be reported

. Updated continuously.