SoFunction
Updated on 2025-04-10

Vue 3 Detailed explanation of table time monitoring and dynamic backend request triggering with demo display

1. Basic knowledge

This type of time points varies from data to data, so timing tasks are not applicable. It is necessary to trigger the front-end table's own data after it arrives.

Most of the following data combined with their own practical codes

Tabular data rendering

In Vue 3, the el-table component is used to display table data. Each row of data in the table is used to specify the displayed content through the column component el-table-column
In the table, the data field is bound by prop, label is used to display the column name

<el-table :data="tableData">
  <el-table-column label="Return the cabinet time" prop="appointmentEndTime" />
  <el-table-column label="operate" />
</el-table>

tableData is a data source of array or object type. The table displays data in the table column according to the prop attribute

Time formatting and calibration
In front-end scenarios, formatting time is often required to facilitate display or make logical judgments

For example, the getTime() method of the Date object gets the timestamp, which is used to compare whether a certain point in time has arrived.

const currentTime = new Date().getTime() // Get the time stamp of the current timeconst appointmentTime = new Date().getTime() // Get the time stamp of the appointment time

This helps deal with time-related business logic, such as triggering an operation when a certain point in time is reached

Asynchronous API Requests
When time arrives, the backend API request is automatically triggered through the front-end code

In Vue 3, a common asynchronous request is to useasync/awaitor.then/.catchTo handle the success and failure of the request

await ()
  .then(response => { ("Request successfully handled") })
  .catch(error => { ("Request failed") })

This scenario is suitable for dynamically deleting data in the database, or other operations that require accurate time-triggering

Timer and real-time monitoring
Use the setInterval method to implement a timed task, and the callback function will be executed every specified time

This method is often used to check whether certain conditions are met in real time, such as checking whether a certain time in the form has reached the current time

setInterval(() => {
  checkAppointmentTimes() // Check once every second}, 1000)

In this way, real-time monitoring of changes in a certain data can be achieved, and related operations will be automatically triggered when specific conditions are met.

Conditional judgment and prevention of multiple requests
To avoid multiple requests being triggered, the conditions must be specified.
It is usually checked whether a certain data is empty or whether the time difference meets the criteria.

For example: When the appointmentEndTime is not null and the time difference is within 1 second, the request is triggered (time usage is inappropriate, because it is difficult to make a judgment on the millisecond level)

if (appointmentTime - currentTime <= 1000 && appointmentTime >= currentTime) {
  // Trigger backend request}

2. Demo

The following demo and logic are more common!

Demo 1: Delete expired appointments (my own actual code)

Scenario: Automatically delete appointments that exceed the time to return the cabinet

  • Table rendering: Render tables through el-table to display the reservation time of each row
  • Time check: Check the time column in the table every second, and automatically delete the corresponding data when the return time reaches the time of the cabinet.
<template>
  <el-table :data="(tableData)">
    <el-table-column label="Return the cabinet time" prop="appointmentEndTime" />
    <el-table-column label="operate" />
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { GoodsStoragePlanApi } from '@/api'
const tableData = ref({
  data1: { id: 1, appointmentEndTime: '2024-09-21 15:00:00' },
  data2: { id: 2, appointmentEndTime: '2024-09-21 16:00:00' }
})
const checkAppointmentTimes = async () => {
  const currentTime = new Date().getTime()
  ().forEach(async (item) => {
    if () {
      const appointmentTime = new Date().getTime()
      if (appointmentTime - currentTime <= 1000 && appointmentTime >= currentTime) {
        await ()
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkAppointmentTimes()
  }, 1000)
})
</script>

Demo 2: Reminder for expired products

Scenario: Send a reminder request when the product is about to expire

  • Time logic: Here the check time difference is set to 1 hour (3600000 milliseconds), that is, the reminder request will be triggered only within one hour of the product expiration time.
  • Backend request: When the time meets the condition, a reminder request is triggered to send a notification about the expiration to the user.
<template>
  <el-table :data="(productList)">
    <el-table-column label="Expiration time" prop="expirationTime" />
    <el-table-column label="operate" />
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ProductApi } from '@/api'
const productList = ref({
  product1: { id: 101, expirationTime: '2024-10-01 18:00:00' },
  product2: { id: 102, expirationTime: '2024-10-02 12:00:00' }
})
const checkExpirationTimes = async () => {
  const currentTime = new Date().getTime()
  ().forEach(async (item) => {
    if () {
      const expirationTime = new Date().getTime()
      if (expirationTime - currentTime <= 3600000 && expirationTime >= currentTime) { // Within 1 hour        await ()
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkExpirationTimes()
  }, 60000) // Check once a minute})
</script>

Demo 3: Meeting Reminder System

Scenario: Automatically remind the user of the upcoming meeting

  • Logical settings: Send reminders 10 minutes before the meeting begins, and check the meeting list every minute through setInterval
  • API trigger: When the time difference is less than 10 minutes, send reminders through the API
<template>
  <el-table :data="(meetingList)">
    <el-table-column label="Conference start time" prop="meetingStartTime" />
    <el-table-column label="operate" />
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { MeetingApi } from '@/api'
const meetingList = ref({
  meeting1: { id: 201, meetingStartTime: '2024-09-25 09:00:00' },
  meeting2: { id: 202, meetingStartTime: '2024-09-26 11:00:00' }
})
const checkMeetingTimes = async () => {
  const currentTime = new Date().getTime()
  ().forEach(async (item) => {
    if () {
      const meetingTime = new Date().getTime()
      if (meetingTime - currentTime <= 600000 && meetingTime >= currentTime) { // Within 10 minutes        await ()
      }
    }
  })
}
onMounted(() => {
  setInterval(() => {
    checkMeetingTimes()
  }, 60000) // Check once a minute})
</script>

This is the end of this article about Vue 3 Form Time Monitoring and Dynamic Backend Request Triggering (with Demo). For more information about Vue 3 Form Time Monitoring, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!