Vue中Vuex Getter计算属性控制v-show不生效原因排查

相关代码 #

模板代码 #

<LeaderboardChart v-show="leaderboardNotEmpty"/>

计算属性代码 #

computed: {
    leaderboardNotEmpty(){
        console.log(this.$store.getters.getLeaderboard.length > 0)
        return this.$store.getters.getLeaderboard.length > 0
    }
}

问题现象 #

控制台打印结果为true，但LeaderboardChart组件依然被v-show设置为display: none。

问题根源及解决方式 #

经排查确认，问题出在项目中另一个完全无关的组件报错——该错误中断了Vue的完整渲染流程，导致v-show对应的DOM样式更新逻辑未能正常执行。

解决步骤：

• 排查项目内其他组件代码，定位并修复报错的组件
• 可通过注释其他组件的方式逐步缩小范围，找到引发报错的根源组件

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