Vue.js中使用Percircle库时API返回的动态数据不更新如何解决？

数据老陈

2026-10-1

Vue项目Percircle动态百分比首次不渲染解决方案

问题根因

Percircle 是原生JS实现的进度环组件，默认仅在初始化时读取一次DOM上的data-percent属性完成渲染，不会主动监听DOM属性的动态变化。
你首次发起API请求前，Percircle已经完成初始化，此时读取到的是receivedFilterData.visit_percentage_without_prescription的初始空值/默认值；API返回数据更新绑定属性后，Percircle未触发重绘逻辑，因此仍显示初始状态。第二次调用API时，上一次更新后的属性值已经存在于DOM上，Percircle初始化时即可读取到正确值，因此展示正常。

解决方法

步骤1：给Percircle元素添加ref标识，方便获取DOM实例

<div 
  ref="percentCircle"
  :data-percent="receivedFilterData.visit_percentage_without_prescription" 
  class="small percircle red animate"
></div>

步骤2：API数据更新后手动触发Percircle重绘

在API请求成功、数据赋值完成后，通过$nextTick等待Vue完成DOM属性更新，再调用Percircle的初始化方法触发重绘：

// 你的API请求逻辑
yourApiRequest().then(res => {
  // 更新绑定的数据源
  this.receivedFilterData = res.data
  // 等待Vue更新DOM后，手动重绘进度环
  this.$nextTick(() => {
    // 带jQuery写法
    $(this.$refs.percentCircle).percircle()
    // 无jQuery原生写法
    // percircle(this.$refs.percentCircle)
  })
})

兼容Vue3写法

如果使用Vue3，调整对应语法即可：

import { nextTick, ref } from 'vue'
const percentCircle = ref()

// API请求逻辑
yourApiRequest().then(res => {
  receivedFilterData.value = res.data
  nextTick(() => {
    percircle(percentCircle.value)
  })
})