0

I am using [Element-ui][1] to build my front end.

I want to do:

  1. While I will click a button a alert() message will show.
  2. As long as the message will show, at that moment button loading will show.
  3. I have added setTimeout() to true the loading. But not working!!!

Button:

<el-button type="primary" @click="open" :loading="isLoading">Enable Cart Tracking</el-button>

Data:

data() {
  return {
    isLoading: false
  }
},

Methods:

open() {
 this.$message({type: 'success', message: 'Cart Enabled'}); 
 setTimeout(function()
 { 
   console.log("Hmmmm");
   this.isLoading = true 
  }, 2000);
}

Hmmmm is showing and $message is also showing. But Button loading is not working!!!

aspile
  • 543
  • 8
  • 23
  • Can you try changing `setTimeout(function()` to `setTimeout(() =>` to see if that works? – Shoejep Mar 27 '20 at 11:12
  • Oh brother. Yes. It is working. Can you please give me this as answer with description?? – aspile Mar 27 '20 at 11:14
  • 1
    You can read more about it [here](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work). Basically when you use the 'function' keyword it changes what 'this' means. – Shoejep Mar 27 '20 at 11:16
  • Does this answer your question? [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) – Shoejep Mar 27 '20 at 11:16

0 Answers0