render separate flex row for step ingredients

This commit is contained in:
Alexander Rose
2021-11-13 14:12:10 +01:00
parent 5ae440d5c9
commit 4626af3505

View File

@ -88,23 +88,21 @@
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12">
<table class="table table-sm">
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="s in recipe.steps" >
<template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
<b v-bind:key="s.id">{{s.name}}</b>
</template>
<template v-for="i in s.ingredients">
<ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
@checked-state-changed="updateIngredientCheckedState"></ingredient-component>
</template>
<template v-for="s in recipe.steps" >
<div class="row" v-bind:key="s.id">
<div class="col-md-12">
<template v-if="s.show_as_header && s.name !== '' && s.ingredients.length > 0">
<b v-bind:key="s.id">{{s.name}}</b>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>
<table class="table table-sm">
<template v-for="i in s.ingredients">
<ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
@checked-state-changed="updateIngredientCheckedState"></ingredient-component>
</template>
</table>
</div>
</div>
</div>
</template>
</div>
</div>
</div>