From 7c7158a063b22933d9e0abcbf2f48dfa01e03034 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Wed, 26 Jan 2022 20:59:22 +0800
Subject: [PATCH] Prevent vue-i18n special characters causing error (#11287)

---
 app/src/stores/fields.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/stores/fields.ts b/app/src/stores/fields.ts
index 3828cf5978..cdacb9006c 100644
--- a/app/src/stores/fields.ts
+++ b/app/src/stores/fields.ts
@@ -75,10 +75,13 @@ export const useFieldsStore = defineStore({
 				for (let i = 0; i < field.meta.translations.length; i++) {
 					const { language, translation } = field.meta.translations[i];
 
+					// Interpolate special characters in vue-i18n to prevent parsing error. Ref #11287
+					const literalInterpolatedTranslation = translation.replace(/([{}@$|])/g, "{'$1'}");
+
 					i18n.global.mergeLocaleMessage(language, {
 						fields: {
 							[field.collection]: {
-								[field.field]: translation,
+								[field.field]: literalInterpolatedTranslation,
 							},
 						},
 					});