button element plus loading

I need to put a delay(loading) on button when user ckick the button using element plus

<el-button type="primary" :loading="delay_search_button" icon="el-icon-search" size="small" style="width: 14.5vh" @click="searchButton"></el-button>

methods: {
    searchButton ()  {
        this.delay_search_button = true;
        setTimeout(() => {
          this.delay_search_button = false;
          console.log(this.delay_search_button)
        }, 2000);
      },
      
  },

but this code doesn't work, what i do wrong?

Solution

Your code works perfectly. I don't see any problem with it.

var Main = {
    data() {
      return {
            delay_search_button: false
      }
    },
    methods: {
        searchButton ()  {
            this.delay_search_button = true;
            setTimeout(() => {
              this.delay_search_button = false;
              console.log(this.delay_search_button)
            }, 2000);
        }          
    }
};
const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")

<html>
<head>
<link rel="stylesheet" href="//unpkg.com/element-plus/theme-chalk/index.css">
</head>
<body>
<script src="//unpkg.com/vue@next"></script>
<script src="//unpkg.com/element-plus/dist/index.full.js"></script>
<div id="app">
<div> 
</div>
<el-button type="primary" :loading="delay_search_button" icon="el-icon-search" size="small" @click="searchButton"></el-button>
</div>
</body>
</html>