working on a recipe view

vue/src/apps/RecipeView/RecipeView.vue

@@ -1,8 +1,12 @@
 <template>
-  <div id="app">
-    <h1>Recipe View</h1>
+  <div id="app" v-if="!loading">
+    <h1>{{ recipe.name }}</h1>
 
-    {{ recipe }}
+    <img v-bind:src="recipe.image">
+
+    <div v-for="s in recipe.steps" v-bind:key="s.id">
+      <Step v-bind:step="s" v-bind:servings="servings"></Step>
+    </div>
   </div>
 
 </template>
@@ -15,25 +19,47 @@ import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import {makeToast} from "@/utils/utils.js";
+import Step from "@/components/Step";
+import axios from "axios";
+
 
 Vue.use(BootstrapVue)
 
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    servings: 1
+  }
+})
+
+
 export default {
-  name: 'App',
-  components: {},
+  name: 'RecipeView',
+  store: store,
+  components: {
+    Step
+  },
   data() {
     return {
-      recipe: undefined
+      loading: true,
+      recipe: undefined,
+      servings: 1,
     }
   },
   mounted() {
-    makeToast("Error", "Error", "danger")
+    //makeToast("Error", "Error", "danger")
     this.loadRecipe(5)
+
   },
   methods: {
     loadRecipe: function (recipe_id) {
-      fetch(`/api/recipe/${recipe_id}`).then((response) => {
+      axios.get(`/api/recipe/${recipe_id}`).then((response) => {
+
         this.recipe = response.data;
+        this.loading = false;
       }).catch((err) => {
         console.log(err)
       })

vue/src/components/HelloWorld.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    {{ text }}
-  </div>
-</template>
-
-<script>
-import {myCustomTestFunction} from "@/utils";
-
-export default {
-  name: 'HelloWorld',
-  data() {
-    return {
-      text: ''
-    }
-  },
-  props: {
-    msg: String
-  },
-  mounted() {
-    this.text = myCustomTestFunction("Neuer Text")
-  }
-}
-</script>

vue/src/components/Ingredient.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <input type="checkbox">
+    {{ingredient.amount}}
+    {{ingredient.unit}}
+    {{ingredient.food}}
+    {{ingredient.note}}
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Ingredient',
+  props: {
+    ingredient: Object,
+    servings: Number
+  }
+}
+</script>

vue/src/components/Step.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+
+    <div v-for="i in step.ingredients" v-bind:key="i.id">
+      <Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
+    </div>
+
+    <br/>
+
+    Servings Step: {{servings}}
+
+    {{ step.instruction }}
+
+    <br/>
+    <br/>
+  </div>
+
+</template>
+
+<script>
+
+import Ingredient from "@/components/Ingredient";
+
+export default {
+  name: 'Step',
+  components: {
+    Ingredient
+  },
+  props: {
+    step: Object,
+    servings: Number,
+  }
+}
+</script>

vue/src/components/ToastComponent.vue

@@ -1,27 +0,0 @@
-<template>
-
-</template>
-
-<script>
-import Vue from 'vue'
-
-import {BootstrapVue} from 'bootstrap-vue'
-
-Vue.use(BootstrapVue)
-
-export default {
-  name: "ToastComponent",
-  methods: {
-    this.$bvToast.toast(message, {
-      title: title,
-      variant: variant,
-      toaster: 'b-toaster-top-center',
-      solid: true
-    })
-  }
-}
-</script>
-
-<style scoped>
-
-</style>