savestate

src/App.vue

@@ -3,72 +3,102 @@ import Rule from '@/components/Rule.vue'
 import { reactive, computed, ref } from 'vue'
 
 let currentRule = ref(0)
-let lang = "eng"
+let lang = ref(true)
+
+const toggleLang = () => {
+  lang.value = !lang.value
+}
 
 const availableRules = computed(() => {
-  rules = this.rules.find(rule => rule.lang === this.lang)
-  if (this.lang === "eng") {
-    rules.description = rules.engdescription
-  } else {
-    rules.description = rules.gerdescription
-  }
-
-  return rules
+  console.log("Rule update:", rules);
+  return rules.map(rule => {
+    if (lang.value) {
+      rule.name = rule.engname
+      rule.description = rule.engdescription
+    } else {
+      rule.name = rule.gername
+      rule.description = rule.gerdescription
+    }
+    return rule;
+  })
 })
 
 
-let rules = [
-{
-    name: "Strings can be simply matched by setting them as a regex Rule",
-    description: "Nothing yet",
+let rules = reactive([
+  {
+    engname: "Strings can be simply matched by setting them as a regex Rule",
+    engdescription: "Nothing yet",
+    gername: "aaaa",
+    gerdescription: "",
+    name: "",
+    description: "",
     id: 0
   },
   {
-    name: "Dots represent any number of any Character",
-    description: "Nothing yet",
+    engname: "Dots represent any number of any Character",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 1
   },
   {
-    name: "Put characters in square brackets to match any of them",
-    description: "Nothing yet",
+    engname: "Put characters in square brackets to match any of them",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 2
   },
   {
-    name: "Put a range of numbers inside square brackets with a dash in between to match a range",
-    description: "Nothing yet",
+    engname: "Put a range of numbers inside square brackets with a dash in between to match a range",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 3
   },
   {
-    name: "Use an asterisk to match any amount of a specific character",
-    description: "Nothing yet",
+    engname: "Use an asterisk to match any amount of a specific character",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 4
   },
   {
-    name: "Use a plus sign to match a specific character if it exists one or more times",
-    description: "Nothing yet",
+    engname: "Use a plus sign to match a specific character if it exists one or more times",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 5
   },
   {
-    name: "Use a question mark to match a character that could exist optionally",
-    description: "Nothing yet",
+    engname: "Use a question mark to match a character that could exist optionally",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 6
   },
   {
-    name: "To match a specific amount of a specific character, use curly braces",
-    description: "Nothing yet",
+    engname: "To match a specific amount of a specific character, use curly braces",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 7
   },
   {
-    name: "To match a specific amount or a higher amount of a specific character, use curly braces with a comma",
-    description: "Nothing yet",
+    engname: "To match a specific amount or a higher amount of a specific character, use curly braces with a comma",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 8
   },
   {
-    name: "To match a number of characters within a specific range, use curly braces with the range and a comma in between",
-    description: "Nothing yet",
+    engname: "To match a number of characters within a specific range, use curly braces with the range and a comma in between",
+    engdescription: "Nothing yet",
+    gername: "",
+    gerdescription: "",
     id: 9
   }
 ]
+)
 
 
 
@@ -77,17 +107,13 @@ let rules = [
 
 <template>
   <select name="RuleSelector" id="RuleSelector" v-model="currentRule">
-  <option v-for="rule in availableRules" :key="rule.id" :value="rule.id">
-    {{ rule.name }}
-  </option>
-</select>
-{{ currentRule }}
-  <Rule
-  :currentRule="currentRule"
-  :rules="rules"
-  :lang="lang"
-  />
+    <option v-for="rule in availableRules" :key="rule.id" :value="rule.id">
+      {{ rule.name }}
+    </option>
+  </select>
+  <Rule :currentRule="currentRule" :rules="rules" />
+  <br>
+  <button @click="toggleLang">{{ lang ? "Toggele Sprache" : "Toggle language" }}</button>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

src/components/Rule.vue

@@ -3,8 +3,7 @@ import { computed } from 'vue'
 const props = defineProps ({
     rules: Array,
     currentRule: Number,
-    lang: String
-})
+  })
 
 const currentRuleObj = computed(() => {
   return props.rules.find(rule => rule.id === props.currentRule)