Remove/Replace all v-html (#114)

eclipse-basyx · Nov 26, 2024 · 99e23d1 · 99e23d1
1 parent 90cf09c
commit 99e23d1
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 21 deletions.
diff --git a/aas-web-ui/src/components/Dashboard/Dashboard.vue b/aas-web-ui/src/components/Dashboard/Dashboard.vue
@@ -33,13 +33,10 @@
                     <v-card-title>{{ 'Are you sure?' }}</v-card-title>
                     <v-divider></v-divider>
                     <v-card-text>
-                        <div
-                            class="text-subtitleText"
-                            v-html="
-                                'Careful! You are about to delete the whole <strong class=\'text-normalText\'>' +
-                                selectedGroup.groupName +
-                                '</strong> Dashboard.'
-                            "></div>
+                        <div class="text-subtitleText">
+                            Careful! You are about to delete the whole
+                            <strong class="text-normalText"> {{ selectedGroup.groupName }} '</strong> Dashboard.
+                        </div>
                         <div class="mt-3 mb-2">Type the Dashboard Name to proceed.</div>
                         <v-text-field
                             v-model="selectedGroupInput"

diff --git a/aas-web-ui/src/components/SubmodelElements/Entity.vue b/aas-web-ui/src/components/SubmodelElements/Entity.vue
@@ -13,7 +13,7 @@
         <!-- globalAssetId -->
         <v-list-item v-if="entityObject.globalAssetId" class="px-1 pb-1 py-2 mb-3">
             <template #title>
-                <div class="text-subtitle-2 mt-2" v-html="'Global Asset ID: '"></div>
+                <div class="text-subtitle-2 mt-2">{{ 'Global Asset ID: ' }}</div>
             </template>
             <template #subtitle>
                 <div class="pt-2">
@@ -26,7 +26,7 @@
                         @click="jump(entityObject.globalAssetId)"
                         >Jump</v-btn
                     >
-                    <span v-html="entityObject.globalAssetId"></span>
+                    <span>{{ entityObject.globalAssetId }}</span>
                 </div>
             </template>
         </v-list-item>
@@ -36,7 +36,7 @@
             v-if="entityObject.specificAssetIds && entityObject.specificAssetIds.length > 0"
             class="px-1 pb-1 py-2 mb-3">
             <template #title>
-                <div class="text-subtitle-2 mt-2" v-html="'Specific Asset IDs: '"></div>
+                <div class="text-subtitle-2 mt-2">{{ 'Specific Asset IDs: ' }}</div>
             </template>
             <template #subtitle>
                 <div v-for="specificAssetId in entityObject.specificAssetIds" :key="specificAssetId.name" class="pt-2">
@@ -52,7 +52,7 @@
                     <v-chip label size="x-small" border color="primary" class="mr-2" style="margin-top: -3px">{{
                         specificAssetId.name
                     }}</v-chip>
-                    <span v-html="specificAssetId.value"></span>
+                    <span>{{ specificAssetId.value }}</span>
                 </div>
             </template>
         </v-list-item>

diff --git a/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue b/aas-web-ui/src/components/SubmodelElements/ReferenceElement.vue
@@ -21,15 +21,15 @@
                         </v-tooltip>
                         <!-- Reference Title -->
                         <template #title>
-                            <div
-                                class="text-subtitle-2 mt-2"
-                                v-html="IsOperationVariable ? 'Reference:' : 'Description:'"></div>
+                            <div class="text-subtitle-2 mt-2">
+                                {{ IsOperationVariable ? 'Reference:' : 'Description:' }}
+                            </div>
                         </template>
                         <!-- Reference Representation -->
                         <template #subtitle>
                             <div v-if="!IsOperationVariable || IsOutputVariable" class="pt-2">
                                 <v-chip label size="x-small" border class="mr-2">{{ value.type }}</v-chip>
-                                <span v-html="value.value"></span>
+                                <span> {{ value.value }}</span>
                             </div>
                             <!-- Input Field containing the Variable Value -->
                             <v-text-field

diff --git a/aas-web-ui/src/components/UIComponents/DataSpecificationContent.vue b/aas-web-ui/src/components/UIComponents/DataSpecificationContent.vue
@@ -3,7 +3,7 @@
         <v-list-item>
             <!-- Title -->
             <template #title>
-                <div class="text-subtitle-2 mt-2" v-html="'Data Specification Content:'"></div>
+                <div class="text-subtitle-2 mt-2">{{ 'Data Specification Content:' }}</div>
             </template>
             <!-- Content List -->
             <!-- dataType -->

diff --git a/aas-web-ui/src/components/UIComponents/DescriptionElement.vue b/aas-web-ui/src/components/UIComponents/DescriptionElement.vue
@@ -10,18 +10,17 @@
             </v-tooltip>
             <!-- Description Title -->
             <template #title>
-                <div
-                    class="mt-2"
-                    :class="small ? 'text-caption' : 'text-subtitle-2 '"
-                    v-html="descriptionTitle + ':'"></div>
+                <div class="mt-2" :class="small ? 'text-caption' : 'text-subtitle-2 '">
+                    {{ descriptionTitle + ':' }}
+                </div>
             </template>
             <!-- Descriptions List (different Languages) -->
             <v-list-item-subtitle v-for="(description, i) in descriptionObject" :key="i">
                 <div class="pt-2">
                     <v-chip label size="x-small" border class="mr-2">{{
                         description.language ? description.language : 'no-lang'
                     }}</v-chip>
-                    <span v-html="description.text"></span>
+                    <span>{{ description.text }}</span>
                 </div>
             </v-list-item-subtitle>
         </v-list-item>