LWC动态样式绑定异常 两个lightning-badge样式更新不同步

代码存在两个核心问题，直接导致徽章样式更新不同步：

• 违反LWC响应式更新规则：在patientsCompleted getter方法中直接修改badgeClass属性。LWC渲染周期中getter会按照模板绑定的先后顺序执行，渲染第一个徽章时执行getter触发的badgeClass修改不会触发当前已进入渲染流程节点的重绘，等渲染到第二个徽章时才会读取到修改后的class值，最终出现两个徽章样式不一致的现象。
• 逻辑分支覆盖不全：现有代码只处理了完成数等于总数时追加success绿色样式的分支，一旦后续新增未完成记录导致两数不相等，class永远不会回退到初始的灰色inverse样式。

不要在getter中修改组件属性，将badgeClass也改为计算getter，让其依赖完成数、总数的结果动态返回对应类名，彻底移除手动给badgeClass赋值的逻辑。

修正后的JS代码 #

get patientsCompleted() {
    if (!this.records) return 0;
    return this.records.filter(value => value.fields.Status__c.value == "Completed").length;
}

get patientsTotal() {
    return this.records?.length || 0;
}

get badgeClass() {
    const baseStyle = "slds-badge_inverse slds-var-m-horizontal_x-small slds-col";
    return this.patientsCompleted === this.patientsTotal
        ? `${baseStyle} slds-theme_success`
        : baseStyle;
}

模板代码无需调整，保持原有绑定逻辑即可 #

<span class="slds-col_bump-left">
  <div class="slds-grid slds-gutters">
    <lightning-badge class={badgeClass} label={patientsCompleted}></lightning-badge>
    <div class="slds-col"> of </div>
    <lightning-badge class={badgeClass} label={patientsTotal}></lightning-badge>
  </div>    
</span>

LWC响应式系统会自动追踪计算属性的依赖值，当records变动导致完成数、总数更新时，badgeClass会自动重新计算，两个绑定了该属性的徽章会同步获取最新的类名，不会出现渲染顺序导致的更新不同步问题，同时天然覆盖了数值从相等变回不等时的样式回滚场景，保证两个徽章在任何状态下样式都保持一致。

内容的提问来源于stack exchange，提问作者jackb