keywords

vue/src/apps/RecipeView/RecipeView.vue

@@ -7,9 +7,11 @@
       </div>
     </div>
 
-    <!--TODO Tags -->
+    <div style="text-align: center">
+      <keywords :recipe="recipe"></keywords>
+    </div>
 
-    <div class="row">
+    <div class="row" style="margin-top: 8px">
       <div class="col-12" style="text-align: center">
         <i>{{ recipe.description }}</i>
       </div>
@@ -146,6 +148,7 @@ import ImageViewer from "@/components/ImageViewer";
 import Nutrition from "@/components/Nutrition";
 
 import moment from 'moment'
+import Keywords from "@/components/Keywords";
 
 Vue.prototype.moment = moment
 
@@ -164,6 +167,7 @@ export default {
     Step,
     RecipeContextMenu,
     Nutrition,
+    Keywords,
   },
   data() {
     return {

vue/src/components/Keywords.vue

@@ -0,0 +1,17 @@
+<template>
+    <div v-if="recipe.keywords.length > 0">
+      <small :key="k.id" v-for="k in recipe.keywords" style="padding: 2px">
+        {{k.icon}} {{k.name}}
+      </small>
+    </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Keywords',
+  props: {
+    recipe: Object,
+  },
+}
+</script>

vue/webpack-stats.json

@@ -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.053e29b2cace695f54ae.hot-update.js","publicPath":"http://localhost:8080/recipe_view.053e29b2cace695f54ae.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.053e29b2cace695f54ae.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Ingredient.vue\n  4:41  error  Unexpected mutation of \"ingredient\" prop  vue/no-mutating-props\n\n✖ 1 problem (1 error, 0 warnings)\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"},{"name":"recipe_view.6a32bc3201ad26dbc898.hot-update.js","publicPath":"http://localhost:8080/recipe_view.6a32bc3201ad26dbc898.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.6a32bc3201ad26dbc898.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Keywords.vue\n  3:7  error  Elements in iteration expect to have 'v-bind:key' directives  vue/require-v-for-key\n\n✖ 1 problem (1 error, 0 warnings)\n"}