From 5880bd86e622d23dd8820c1e909b7bf296effecd Mon Sep 17 00:00:00 2001
From: Erin <erin@limetech.io>
Date: Mon, 21 Apr 2025 18:55:43 +0100
Subject: [PATCH] Fix client-side metrics display

Vue 3 changed the order of `v-if` and `v-for` evaluation, which had this trying to index an undefined variable.

Per the recommendation in the upstream docs, created a pre-filtered array as a computed property to use instead of combining them on the same element.
---
 .../Tabs/Performance/PerformanceClientSide.vue           | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Tabs/Performance/PerformanceClientSide.vue b/src/components/Tabs/Performance/PerformanceClientSide.vue
index b31ba86..6680092 100644
--- a/src/components/Tabs/Performance/PerformanceClientSide.vue
+++ b/src/components/Tabs/Performance/PerformanceClientSide.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="performance-client-side">
-		<div class="counters-row performance-metrics" v-if="metrics.filter(m => m.value).length">
-			<div class="counter performance-chart-legend" v-if="metric.value" v-for="metric in metrics.filter(m => ! m.dom)">
+		<div class="counters-row performance-metrics" v-if="metricsWithValues.length">
+			<div class="counter performance-chart-legend" v-for="metric in metricsWithValues.filter(m => ! m.dom)">
 				<div class="counter-value">{{metric.value}} ms</div>
 				<div class="counter-title" :class="metric.color ? `has-mark mark-${metric.color}` : ''">{{metric.name}}</div>
 			</div>
 			<div class="counters-group right-aligned">
-				<div class="counter performance-chart-legend" v-if="metric.value" v-for="metric in metrics.filter(m => m.dom)">
+				<div class="counter performance-chart-legend" v-for="metric in metricsWithValues.filter(m => m.dom)">
 					<div class="counter-value">{{metric.value}} ms</div>
 					<div class="counter-title" :class="metric.color ? `has-mark mark-${metric.color}` : ''">{{metric.name}}</div>
 				</div>
@@ -122,7 +122,8 @@ export default {
 	components: { DetailsTable, PerformanceChart },
 	props: [ 'metrics', 'vitals' ],
 	computed: {
-		showVitalsInfo() { return this.$settings.global.performanceVitalsInfoShown }
+		showVitalsInfo() { return this.$settings.global.performanceVitalsInfoShown },
+		metricsWithValues() { return this.metrics.filter(m => m.value) }
 	},
 	methods: {
 		toggleVitalsInfo() {