时间戳

首页 > 解决方案 > 在 v-for 中为每个结果创建倒计时

vue.js - 在 v-for 中为每个结果创建倒计时

问题描述

我有一个循环，在其中我从我的 API 调用中得到了几个结果。他们每个人都有一个名为的属性，该属性processing_time显示距离发生某事还剩多少秒。

如何实现每个间隔的倒计时？

这是我的<progressbar>组件，它需要一个初始显示进度的值（我需要它是动态的）

<progress-bar :options="options"
  :value="data.properties.processing_time"
/>
<span class="progress-bar-seconds"
  >{{ data.properties.processing_time }} Seconds left
  ...</span>

我觉得我需要使用computed，但我不知道该怎么做。

标签： vue.jscountdown

解决方案

计算道具可能不是最佳解决方案，因为您需要在本地更改计时器值。我建议使用定期更新的本地副本：

  1. 创建一个本地数据属性 (a ref)。
  2. 安装时将道具复制value到本地数据道具。
  3. 用于setInterval定期递减值。
<template>
  <div>
    <span class="progress-bar-seconds">{{ seconds }} Seconds left ...</span>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  props: {
    value: {
      type: Number,
      default: 0,
      required: true,
    },
  },
  setup(props) {
    const seconds = ref(0) // 1️⃣
    let _timerId = null

    onMounted(() => {
      seconds.value = props.value // 2️⃣
      if (seconds.value > 0) {
        // 3️⃣
        _timerId = setInterval(() => {
          seconds.value--
          if (seconds.value <= 0) {
            clearInterval(_timerId)
          }
        }, 1000)
      }
    })

    onUnmounted(() => clearInterval(_timerId))

    return { seconds }
  }
}
</script>

演示

推荐阅读