Ändere Lottie.vue, um array.filter hinzuzufügen und die Anpassung an...

 Ändere Lottie.vue, um array.filter hinzuzufügen und die Anpassung an verschiedene Lottie-Dateien zu verbessern.
 Füge temporär AnimationRechtsBB.layers[1] und AnimationLinksBB.layers[1] hinzu, um die anfängliche Animationsausgabe zu verbessern.

src/components/Lottie.vue

@@ -82,12 +82,17 @@ watch(
 
 const lottie = ref(0);
 
+// Added array.filter to improve adaptability to different lottie files
+
 watch(
   () => props.vorname,
   () => {
-    console.log(AnimationRechtsBB.layers[1].t.d.k[0].s.t);
-    AnimationRechtsBB.layers[1].t.d.k[0].s.t = props.vorname.toUpperCase();
-    AnimationLinksBB.layers[1].t.d.k[0].s.t = props.vorname.toUpperCase();
+    AnimationRechtsBB.layers.filter((layer) => {
+      return layer.nm === "VORNAME";
+    })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
+    AnimationLinksBB.layers.filter((layer) => {
+      return layer.nm === "VORNAME";
+    })[0].t.d.k[0].s.t = props.vorname.toUpperCase();
     lottie.value++;
   }
 );
@@ -95,8 +100,12 @@ watch(
 watch(
   () => props.nachname,
   () => {
-    AnimationRechtsBB.layers[3].t.d.k[0].s.t = props.nachname.toUpperCase();
-    AnimationLinksBB.layers[3].t.d.k[0].s.t = props.nachname.toUpperCase();
+    AnimationRechtsBB.layers.filter((layer) => {
+      return layer.nm === "NACHNAME";
+    })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
+    AnimationLinksBB.layers.filter((layer) => {
+      return layer.nm === "NACHNAME";
+    })[0].t.d.k[0].s.t = props.nachname.toUpperCase();
     lottie.value++;
   }
 );
@@ -104,8 +113,12 @@ watch(
 watch(
   () => props.funktionZeileEins,
   () => {
-    AnimationRechtsBB.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
-    AnimationLinksBB.layers[5].t.d.k[0].s.t = props.funktionZeileEins;
+    AnimationRechtsBB.layers.filter((layer) => {
+      return layer.nm === "FUNKTION1";
+    })[0].t.d.k[0].s.t = props.funktionZeileEins;
+    AnimationLinksBB.layers.filter((layer) => {
+      return layer.nm === "FUNKTION1";
+    })[0].t.d.k[0].s.t = props.funktionZeileEins;
     lottie.value++;
   }
 );
@@ -113,13 +126,18 @@ watch(
 watch(
   () => props.funktionZeileZwei,
   () => {
-    AnimationRechtsBB.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
-    AnimationLinksBB.layers[7].t.d.k[0].s.t = props.funktionZeileZwei;
+    AnimationRechtsBB.layers.filter((layer) => {
+      return layer.nm === "FUNKTION2";
+    })[0].t.d.k[0].s.t = props.funktionZeileZwei;
+    AnimationLinksBB.layers.filter((layer) => {
+      return layer.nm === "FUNKTION2";
+    })[0].t.d.k[0].s.t = props.funktionZeileZwei;
     lottie.value++;
   }
 );
 
 onMounted(() => {
+  // Added this temporarily to improve initial animation output
   AnimationRechtsBB.layers[1].t.d.k[0].s.t = "MAX";
   AnimationLinksBB.layers[1].t.d.k[0].s.t = "MAX";
   AnimationRechtsBB.layers[3].t.d.k[0].s.t = "MUSTERMANN";
@@ -137,7 +155,7 @@ onMounted(() => {
 </script>
 <template>
   <h2 v-if="BBUnselected">
-    Bitte eine Postion für<br />
+    Bitte eine Position für<br />
     die Bauchbinde auswählen
   </h2>
   <div class="animation">