How to add setTimeout function to loader in vuejs? (Check Example for better understanding)

Question

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>

Answer 1

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