This commit is contained in:
vabene1111
2021-01-13 01:23:20 +01:00
parent cd51d12618
commit e69d1c3408
10 changed files with 69 additions and 17 deletions

View File

@@ -28,12 +28,12 @@
<div class="card border-primary">
<div class="card-body">
<div class="row">
<div class="col col-md-9">
<div class="col col-md-8">
<h4 class="card-title">{{ _('Ingredients') }}</h4>
</div>
<div class="col col-md-3">
<div class="col col-md-4">
<div class="input-group d-print-none">
<input type="number" value="1" maxlength="3" class="form-control" style="min-width: 2vw"
<input type="number" value="1" maxlength="3" class="form-control" style="min-width: 4vw;"
v-model.number="servings"/>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-calculator"></i></span>

View File

@@ -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>

View File

@@ -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,

View File

@@ -1 +1 @@
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.0cfcbd4a9e2e54391a69.hot-update.js","publicPath":"http://localhost:8080/recipe_view.0cfcbd4a9e2e54391a69.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.0cfcbd4a9e2e54391a69.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):\n(Emitted value instead of an instance of Error) \n\n Errors compiling template:\n\n Component template requires a root element, rather than just text.\n\n 1 | \n | \n 2 | {{ calculateAmount(number) }}\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n 3 | \n"}
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"}]}}