Tag Archives: Element

Use of error attribute in element UI (solution of triggering only once)

Requirement: enter the ID in the input box to initiate the back-end request. When the back-end interface returns an error message, an error message will be prompted below the form
to achieve the effect shown in the figure below:

Solution: use the error attribute in El form item to bind an error msg. When an error is reported at the back end, assign a value to the error msg (note that the error msg should be cleared in the blue event, otherwise the same error will only be triggered once)

The code is as follows:

<el-form-item label="商品ID" prop="spuId" :error="errorMsg">
            <el-input v-model="form.spuId" class="w300" @blur="getSku()" @input="form.spuId = form.spuId.replace(/[^\d]/g, '')" />
</el-form-item>

```javascript
getSku(val) {
      this.errorMsg = '' 
      const spuId = val || Number(this.form.spuId)
      if (!spuId) {
        this.errorMsg = 'The item number you entered is incorrect, please re-enter'
        return
      }
      this.options = []
      getSkuDetail({ spuId: spuId }).then(res => {
        this.skuVOS = res.data.skuVOS
      }).catch(err => {
        console.log(err)
        this.errorMsg = 'The item number you entered is incorrect, please re-enter'
      })
    }

It’s not over yet. Another requirement is that there is no error prompt when the verification is not satisfied, but the red box should be displayed
at the beginning, I used the same method, but a space was passed in errormsg. The value of errormsg was also cleared in the blue method, but the red box could only be triggered once. Finally, after multiple attempts, add a timer to display it multiple times:

blurMethod(){
	this.errorMsgOther = ''
	if(somecode) {
		setTimeout(()=>{
			this.errorMsgOther = ' '
		},300)
	}
}```

[Vue warn]: Error in nextTick: “TypeError: Cannot read property ‘map‘ of null“

When using element UI in Vue project, an error is reported: [Vue warn]: error in nexttick: "typeerror: cannot read property 'map' of null"

The error message is as follows:

It’s ridiculous. I studied it myself and recorded it. It’s all the fault of carelessness:

The reason is that the data source of El table is initially set to null. When the default sort attribute is used, the table will map the data source by default and report an error
change currentpagedata: null to currentpagedata: [] .

Resolution process:

Locate the error location 10051 line according to the error information:

array.map reports the error as null, and then locate the array up:

according to the parameters and contents of this method, it is basically determined that the error information is caused by the default sort attribute of El table, that is, the data source array of El table during compilation and sorting is null
looking back at the data source, I found that the data source was initially assigned null. No wonder
change the initial value of the data source array to [] empty array.

Itself is a very simple mistake, but I didn’t expect it.

[Solved] vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: “TypeError: Cannot read property ‘length‘

When using element UI as the form check box, the error vue.runtime.esm.js appears?2b0e: 619 [Vue warn]: error in render: “typeerror: cannot read property ‘length’, as shown in the following figure:

the code is as follows:

the solution is to add the checklist field in the form object as follows:

export default {
	data() {
 		return {
			form: {
				checkList: []
			}
		}
 	}
}

[Vue warn]: Error in render: TypeError: Cannot read property ‘xxxx’of undefined

When using the infinite scroll of element UI, the error occurs. The data displayed asynchronously has no initial data, and then the requested data is displayed. The error is reported when the initial data is displayed
just set an initial value for the error value

or add a judgment to render the data when there is data, and not display it when there is no data.

How to Solve Infinite scroll the pit encountered

InfiniteScroll The pitfalls of this infinite scrolling thing
Solution
[Vue warn]: Error in directive infinite-scroll inserted hook: “TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.” found in
TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.

This is used by adding a large external box to theoverflow: auto;

overflow: auto;

Otherwise, the console will report a crazy error and prompt an error message, as shown in the figure

How to use the menu of elementui unique opened sidebar

Unique opened can control the display of menu sidebar, whether to display only one submenu

We can set it to: unique opened = “true” in the tag

The results are as follows

However, sometimes this will report an error:

The solution is to define a bool type attribute in data, and then bind the attribute to the tag’s unique opened

In this way, the effect is the same, and the problem of error message is solved.

The loop of life and death occurs when the El table component of element UI is bidirectional bound

Regarding the data binding of el-table, an error occurred, and the main error message is as follows.

TypeError: Cannot read property ‘offsetHeight’ of null

Cannot read property ‘offsetHeight’ of null

this.$el.querySelectorAll is not a function

1 recursive calls

TypeError: data.reduce is not a function

Cannot read property ‘instance’ of undefined

Error in callback for immediate watcher “data”: “TypeError: data.indexOf is not a function”

Reason:
:data = param The result is that this param is an object. Example.
vue

 <el-table :data="image.users" ref="usersRef" border>
 </el-table>

js

image:{
    users: {
      cryptionType: 'sha256',
      token: '',
      userList: [
        {
          username: '',
          password: '',
          groups: '',
          remark: ''
        }
      ]
    }
 }

Users is an object, and: data is bound to an array.
My situation is that the interface here has been changed. Users used to be an array, but now it has become an object. The real user array has been changed to the userlist of the users object, but the front-end code has not been changed, resulting in such an error.

So the front-end code is changed to : data= image.users.userList is normal.

Please transfer a valid prop path to form item!

The main error is when setting prop for El form item

The name of the loop prop in El form item should be consistent with the name of the attribute in the form list, so as to ensure the consistency of components.

 

<template v-for="(person,index) in temp">
    <el-form-item prop="name">
        <el-input v-model="person.name"></el-input>
    </el-form-item>
    <el-button @click="removeDomain(index)" size="small">-</el-button>
</template>

Property value is person.name

prop=’name’