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.

Read More: