Vue, how to do multiple countdown?

    getOpenTime(Pinyin,Id) {                   
      this.$post("", { token: this.token, gameId: Id }).then(res => {
        this.OpenTime[Pinyin] = res.info
         this.setIntervalForTime(Pinyin)
      });
    },
    

OpenTime now receives a countdown to a set of numbers
600500400300200
five sets of seconds from this interface address

//
setIntervalForTime(Pinyin) {
    
}
<ul>
            <li v-for="(item, index) in collectionList" :key="index">
              <router-link :to="{name:"/games",params:{gameId:item.Id}}" >
                <img :src="item.url">
                <div class="count_down">
                  <h2>{{item.Name}}</h2>
                  <div class="deadline-number">
                    :
           {{endOpenTime[item.Pinyin].hour1}}{{endOpenTime[item.Pinyin].hour2}}
           :
           {{endOpenTime[item.Pinyin].minute1}}{{endOpenTime[item.Pinyin].minute2}}
           :
           {{endOpenTime[item.Pinyin].second1}}{{endOpenTime[item.Pinyin].second2}}                  
                  </div>
                </div>
              </router-link>
            </li>
          </ul>

what about multiple countdown?

Aug.04,2021

see you ask questions so attentively. Is it convenient to release your res.info data? I don't know the data structure. I don't know what kind of countdown you want to achieve from the image code you gave me.
which numbers are 600 seconds countdown, 500 seconds countdown? Or what?


although I don't understand your description, looking at your code feels that your idea should be the countdown effect looped in v-for. There are two ways to solve the problem. 1 is to use filter,2 to package li separately into components, and directly v-for loop components

.
Menu