How to add setTimeout function to loader in vuejs? (Check Example for better understanding)
I’m using Element-ui framework table data and I want to add a timer on loader which I don’t know how to do it as I’m new to Vuejs.
The loader is currently set as true in a state and it’s keep loading but I want to add timer function to load table data but I don’t know how to add a timer function in the method.
I’ve attached the code below for better understanding,
You can also check live example in Codepen by clicking here
I would really appreciate it if anybody could help me with it, Thanks!
<template> <el-table v-loading="loading" :data="tableData" style="width: 100%"> <el-table-column prop="date" label="Date" width="180"> </el-table-column> <el-table-column prop="name" label="Name" width="180"> </el-table-column> <el-table-column prop="address" label="Address"> </el-table-column> </el-table> <script> export default { data() { return { tableData: [{ date: '2016-05-02', name: 'John Smith', address: 'No.1518, Jinshajiang Road, Putuo District' }, { date: '2016-05-04', name: 'John Smith', address: 'No.1518, Jinshajiang Road, Putuo District' }, { date: '2016-05-01', name: 'John Smith', address: 'No.1518, Jinshajiang Road, Putuo District' }], loading: true }; } }; </script> 
If you want to add a simple time, you must to use a setTimeout function. Try something like this:
<template> <div> {{ loading }} </div> </template> <script> export default { name: 'App', data: () => ({ loading: true, }), mounted() { setTimeout(() => (this.loading = false), 2000); }, }; </script> For more information, you can see the documentation in Mozilla
