webapp: MQTT: use v-if in favor of v-show

if we hide elements (which is done using style="display:none;"), they are still part of the DOM and mess with CSS rules that shall apply to the last element of a card or the last row of a table.
tbnobody · Nov 1, 2024 · 9132a88 · 9132a88
1 parent eecd7f7
commit 9132a88
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/webapp/src/views/MqttAdminView.vue b/webapp/src/views/MqttAdminView.vue
@@ -14,7 +14,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_enabled"
+                    v-if="mqttConfigList.mqtt_enabled"
                     :label="$t('mqttadmin.EnableHass')"
                     v-model="mqttConfigList.mqtt_hass_enabled"
                     type="checkbox"
@@ -26,7 +26,7 @@
                 :text="$t('mqttadmin.MqttBrokerParameter')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled"
+                v-if="mqttConfigList.mqtt_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.Hostname')"
@@ -99,7 +99,7 @@
                 <InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls"
+                    v-if="mqttConfigList.mqtt_tls"
                     :label="$t('mqttadmin.RootCa')"
                     v-model="mqttConfigList.mqtt_root_ca_cert"
                     type="textarea"
@@ -108,14 +108,14 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls"
+                    v-if="mqttConfigList.mqtt_tls"
                     :label="$t('mqttadmin.TlsCertLoginEnable')"
                     v-model="mqttConfigList.mqtt_tls_cert_login"
                     type="checkbox"
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    v-if="mqttConfigList.mqtt_tls_cert_login"
                     :label="$t('mqttadmin.ClientCert')"
                     v-model="mqttConfigList.mqtt_client_cert"
                     type="textarea"
@@ -124,7 +124,7 @@
                 />
 
                 <InputElement
-                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    v-if="mqttConfigList.mqtt_tls_cert_login"
                     :label="$t('mqttadmin.ClientKey')"
                     v-model="mqttConfigList.mqtt_client_key"
                     type="textarea"
@@ -137,7 +137,7 @@
                 :text="$t('mqttadmin.LwtParameters')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled"
+                v-if="mqttConfigList.mqtt_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.LwtTopic')"
@@ -182,7 +182,7 @@
                 :text="$t('mqttadmin.HassParameters')"
                 textVariant="text-bg-primary"
                 add-space
-                v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
+                v-if="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
             >
                 <InputElement
                     :label="$t('mqttadmin.HassPrefixTopic')"

diff --git a/webapp/src/views/MqttInfoView.vue b/webapp/src/views/MqttInfoView.vue
@@ -79,7 +79,7 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-show="mqttDataList.mqtt_tls">
+                        <tr v-if="mqttDataList.mqtt_tls">
                             <th>{{ $t('mqttinfo.RootCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_root_ca_cert_info }}</td>
                         </tr>
@@ -93,7 +93,7 @@
                                 />
                             </td>
                         </tr>
-                        <tr v-show="mqttDataList.mqtt_tls_cert_login">
+                        <tr v-if="mqttDataList.mqtt_tls_cert_login">
                             <th>{{ $t('mqttinfo.ClientCertifcateInfo') }}</th>
                             <td>{{ mqttDataList.mqtt_client_cert_info }}</td>
                         </tr>