Как добавить функцию setTimeout в загрузчик в vuejs? (Проверьте пример для лучшего понимания)

Question

Я использую данные таблицы каркаса Element-ui и хочу добавить таймер в загрузчик, но не знаю, как это сделать, поскольку я новичок в Vuejs.

Загрузчик в настоящее время установлен как истина в состоянии, и он продолжает загружаться, но я хочу добавить функцию таймера для загрузки данных таблицы, но я не знаю, как добавить функцию таймера в метод.

Я прикрепил код ниже для лучшего понимания:

Вы также можете проверить живой пример в Codepen, щелкнув здесь

Я был бы очень признателен, если бы кто-нибудь мог мне помочь с этим, спасибо!

<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

Если вы хотите добавить простое время, вы должны использовать функцию setTimeout. Попробуйте что-то вроде этого:

<template>
  <div>
    {{ loading }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    loading: true,
  }),
  mounted() {
    setTimeout(() => (this.loading = false), 2000);
  },
};
</script>

Для получения дополнительной информации вы можете увидеть документацию в Mozilla