instead of v-html used v-if & v-else

e-motion-apps · Jan 14, 2024 · 9c8e316 · 9c8e316
1 parent afad700
commit 9c8e316
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/lang/pl.json b/lang/pl.json
@@ -154,5 +154,7 @@
     "Rules import started.": "Import zasad uruchomiony.",
     "Run rules import": "Uruchom import zasad",
 
-    "Found": "Znaleziono"
+    "Found": "Znaleziono",
+    "loading info about rules, please wait":"ładowanie informacji o zasadach, proszę czekać"
+
 }
diff --git a/resources/js/Pages/City/Index.vue b/resources/js/Pages/City/Index.vue
@@ -21,7 +21,7 @@ const toast = useToast()
 const page = usePage()
 const isAuth = computed(() => page.props.auth.isAuth)
 const regulationsOpen = ref(false)
-const rules = reactive({ pl: '<i class="text-gray-400">ładowanie informacji o zasadach, proszę czekać...</i>', en: '<i class="text-gray-400">loading info about rules, please wait...</i>' })
+const rules = reactive({ pl: '', en: '' })
 
 fetchRegulations()
 const props = defineProps({
@@ -135,10 +135,13 @@ function createOpinion() {
             <div class="my-3 flex cursor-pointer items-center text-2xl font-bold text-gray-700" @click="toggleRegulations()">
               {{ __('Rules') }} <ArrowDownIcon :class="regulationsOpen ? 'rotated' : ''" class="absolute right-3 inline-block h-6 w-6 transition-all" />
             </div>
-            <div :class="regulationsOpen?'show':''" class="overflow-scroll transition">
-              {{ currentRules }}
+              <div v-if="currentRules == ''" :class="regulationsOpen ? 'show' : ''" class="overflow-scroll transition">
+                <i class="text-gray-400">{{ __('loading info about rules, please wait') }}...</i>
+              </div>
+              <div v-else :class="regulationsOpen ? 'show' : ''" class="overflow-scroll transition">
+                {{ currentRules }}
+              </div>
             </div>
-          </div>
           <form v-if="isAuth" class="mt-8 flex flex-col" @submit.prevent="createOpinion">
             <p class="mb-2 text-xs font-medium text-gray-700">
               {{ __('Add opinion') }}