解决uni-countdown动态赋值变更时间倒计时无变化的问题

-Wack-

已于 2023-08-07 10:53:42 修改

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript uni-app

于 2023-07-27 15:46:00 首次发布

本文链接：https://blog.csdn.net/weixin_59803648/article/details/131960198

在Vue的uni-app项目中，遇到倒计时组件根据服务器返回的数据更新不生效的问题。倒计时组件（uni-countdown）在使用this.$refs.countdown.update()方法时表现不稳定，有时工作，有时不工作，且影响范围仅限当前页面。为解决此问题，尝试通过v-if控制组件的销毁和重建，先将showCount设为false，更新goodsInfo.end_date，然后在$nextTick中恢复showCount为true以触发组件重建。然而，这种方法要求手动设置倒计时来刷新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

倒计时根据服务器返回的数据更新倒计时

重新赋值更新时间后无反应

使用this.$refs.countdown.update()时而有效时而无效且只针对当前页面有反应

只有重新刷新该组件才能更新数据

通过v-if实现组件的销毁和重建

<uni-countdown :font-size="10" :show-day="countDown(goodsInfo.end_date)[0]==0?false:true" :day="countDown(goodsInfo.end_date)[0]" :hour="countDown(goodsInfo.end_date)[1]" :minute="countDown(goodsInfo.end_date)[2]" :second="countDown(goodsInfo.end_date)[3]" color="#F7263D" background-color="#FFFFFF" splitorColor="#FFFFFF" v-if="showCount"/>

data() {
      return {
        showCount: true，
        goodsInfo:{}
      };
    },

更新时间前先将倒计时组件进行销毁，更新数据后再进行重建（不过此处需设置倒计时才能进行倒计时数据刷新）

this.showCount = false
this.goodsInfo.end_date = e.end_date
this.$nextTick(()=>{
  this.showCount = true
})