save

vue/src/components/CompileComponent.vue

@@ -9,6 +9,13 @@ import Vue from 'vue'
 
 import ScalableNumber from "@/components/ScalableNumber";
 
+/*
+i dont 100% understand this kind of dirty workaround but it works ...
+If you read this and know a better way of running arbitrary vue code that comes from an API endpoint let me know
+
+obviously only run trusted code this way ...
+*/
+
 export default {
   name: 'CompileComponent',
   props: ['code', 'servings'],
@@ -23,10 +30,10 @@ export default {
       components: {
         ScalableNumber, // eslint-disable-line
       },
-      template: `
-        <div>${this.code}</div>`
+      template: `<div>${this.code}</div>`
     })
 
   }
 }
 </script>
+

vue/src/components/Step.vue

@@ -21,11 +21,8 @@
 
       <div class="col-md-9">
         <i class="fas fa-paragraph text-secondary"></i>
-        <span v-html="step.ingredients_markdown">
+        <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
 
-        </span>
-
-         <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
       </div>
     </div>
 
@@ -39,7 +36,6 @@ import {calculateAmount} from "@/utils/utils";
 
 import Ingredient from "@/components/Ingredient";
 import {GettextMixin} from "@/utils/utils";
-import ScalableNumber from "@/components/ScalableNumber";
 
 import CompileComponent from "@/components/CompileComponent";
 
@@ -50,8 +46,7 @@ export default {
   ],
   components: {
     Ingredient,
-    CompileComponent, //eslint-disable-line
-    ScalableNumber, // eslint-disable-line
+    CompileComponent,
   },
   props: {
     step: Object,