Overlap of Notification components in element-ui Framework

my goal is to get multiple pieces of data from a table from the database and display it in the form of a notification when opening a single page, so after getting the database data in the mounted hook function, call the Notification component with for loop. 

mounted:function(){
        /**/
        this.$http.post("/api/users/getWarning",{}).then((response) => {
          this.lacklist = response.body;
          for(var i=0;i<this.lacklist.length;iPP){
            this.$notify({
                title:"",
                message:this.lacklist[i].lackwarning_msg,
                type:"warning",
                duration:0
            });
          }
        })
      },

but these components are stacked on top of each other when displayed, and it is found that the recursive increment of the top value of the component is much smaller than that of the top value of the component during the presentation of the description document.


duration0Notification

I"d like to ask you guys whether this is because the Notification component can"t use indexes, or is it for some other reason? If I can"t use an index, how can I call the Notification component in a loop?

Vue.js javascript element-ui
Mar.24,2021

in the end, I still don't know what caused it, but I solved the problem with a timer 

/**/
this.$http.post('/api/users/getWarning',{}).then((response) => {
  var lacklist = response.body;
  var i = 0;
  var warn = setInterval(() => {
    this.$notify({
      title:'',
      message:lacklist[i].lackwarning_msg,
      type:'warning',
      duration:0
    })
    if(i<lacklist.length-1){
      iPP;
    }
    else{
      clearInterval(warn);
    }
  },10);
})

does not look at the source code, but I understand that every time $notify.xxxx is called, it will automatically calculate the current offset, but when it is calculated for several times, because the first page has not yet been rendered, the calculated offset is not accurate. This creates an overlapping effect.

you can refer to the mandatory offset

. 
var offset = 0;
for(var j = 0; j< data.length; jPP){
    vm.$notify.error({
        title: '',
        message: data[j],
        offset: offset
    });
    offset += 70
}

has also encountered this problem, which can be regarded as a solution. My solution is
https://juejin.im/post/5c87a7.

.

Previous: How do graphics drawn by WebGraphviz add events to make them moveable?

Next: A GET 405 error occurred in the $.ajax request

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4b984-445d1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4b984-445d1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?