关于vue渲染多个倒计时问题

直接上代码逻辑

此时拿到后端返回的秒数（返回格式为数组包含秒数）

需要转换为时分秒（00：00：00）的格式

countdown(){
         let that = this;
        //定义一个数组接收后端返回的数组 并拿到它
        this.listData.forEach((item, index) => {
        console.log(item.free_timer);
        var times = item.free_timer;
        if (times > 0) {
          for (let i = 0; i < times; i = i + 1) {
            setTimeout(function () {
              var timess = times - i;
              var h, m, s;
              if (timess > 1) {
                h = Math.floor((timess / 60 / 60) % 24);
                m = Math.floor((timess / 60) % 60);
                s = Math.floor(timess % 60);
                h = checkTime(h);
                m = checkTime(m);
                s = checkTime(s);
                function checkTime(items) {
                  if (items < 10) {
                    items = "0" + items;
                  }
                  return items;
                }
                const timer = h + ":" + m + ":" + s;
                console.log(timer);
                if (that.time.length > index) {
                  that.time = [];
                  that.time.push(timer);
                  // console.log(that.time);
                  that.listData.forEach((item, index) => {
                    that.$set(item, "time1", that.time[index]);
                  });
                } else {
                  that.time.push(timer);
                  that.listData.forEach((item, index) => {
                    that.$set(item, "time1", that.time[index]);
                  });
                }
              } else {

              //此处为倒计时结束之后想要进行的操作

              }
            }, 1000 * i);
          }
        }
      });
}

后续在需要渲染的地方渲染listData数组中的time1

需要进行倒计时的时候 调用该方法就行

以上仅为自身理解，如有错误请各位大佬指正!!!