add img

.gitignore

@@ -171,3 +171,4 @@ npm-debug.log
 yarn-error.log
 
 # End of https://www.toptal.com/developers/gitignore/api/vuejs,node,visualstudiocode
+vuejs-json.rar

vue-json/src/assets/jsondata.json

@@ -2,72 +2,80 @@
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"1. 3. 2022"
+        "date": "9. 3. 2022",
+        "img": "image_01.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"2. 3. 2022"
-    },
-    {
-        "title":"Nadpis1",
-        "content": "Obsah1 ",
-        "date":"3. 3. 2022"
+        "date":"10. 3. 2022",
+        "img": "image_02.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"4. 3. 2022"
+        "date":"11. 3. 2022", 
+        "img": "image_03.jpg"
     },
     {
-        "title":"NadpisA",
-        "content": "ObsahA",
-        "date":"5. 3. 2022"
+        "title":"Nadpis2",
+        "content": "Obsah2",
+        "date":"12. 3. 2022",
+        "img": "image_04.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"6. 3. 2022"
+        "date":"13. 3. 2022",
+        "img": "image_05.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"7. 3. 2022"
+        "date":"14. 3. 2022",
+        "img": "image_06.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"8. 3. 2022"
+        "date":"15. 3. 2022",
+        "img": "image_07.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"9. 3. 2022"
+        "date":"16. 3. 2022",
+        "img": "image_08.jpg"
     },
     {
         "title":"Nadpis2",
-        "content": "Obsah nebude psan",
-        "date":"10. 3. 2022"
+        "content": "Obsah2",
+        "date":"21. 3. 2022",
+        "img": "image_09.jpg"
     },
     {
-        "title":"Olejovita skvrna",
-        "content": "Obsah se bude měnit",
-        "date":"11. 3. 2022"
+        "title":"Nadpis2",
+        "content": "Obsah2",
+        "date":"22. 3. 2022",
+        "img": "image_10.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"12. 3. 2022"
+        "date":"23. 3. 2022",
+        "img": "image_11.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"13. 3. 2022"
+        "date":"24. 3. 2022",
+        "img": "image_12.jpg"
     },
     {
         "title":"Nadpis2",
         "content": "Obsah2",
-        "date":"14. 3. 2022"
+        "date":"25. 3. 2022",
+        "img": "image_13.jpg"
     }
 
 ]

vue-json/src/components/jsonview.vue

@@ -2,21 +2,22 @@
 <div>
   <!-- jsonhead -> hlavička pro navigaci a změnu datumu      -->
   <div id="jsonhead">
-    <h2>JSON</h2>
+    <h1>JSON</h1>
     <p>Použi navigační tlačítka pro změnu datumu</p>
-    <button @click="increment()">+</button>
-    <button @click="resetdate()">RESET</button>    
-    <button @click="decrement()">-</button>
+    <button class="navigace" @click="increment()">+</button>
+    <button class="navigace" @click="resetdate()">RESET</button>    
+    <button class="navigace" @click="decrement()">-</button>
   </div>
 <!-- jsonmain -> div pro zobrazeni hlavní části-->
 <div id="jsonmain">  
-  <h4 v-for="data1 in selectDatum(selectDate(date,numberino))" :key="data1.date">
-    <b>{{data1.title}}</b> - {{data1.content}} - <i>{{data1.date}}</i>
-  </h4>
+  <div v-for="data1 in selectDatum(selectDate(date,numberino))" :key="data1.date">
+    <b>{{data1.title}}</b> - {{data1.content}} - <i>{{data1.date}}</i> <br>
+    <img :src="getImgUrl(data1.img)" v-bind:alt="data1.img">  
+</div>
 </div>
 
   <!-- DEBUG SEKCE -->
-  <button @click="showdebug()">DEBUG</button>
+  <button @click="showdebug()"> DEBUG</button>
 <div id="jsondebug" style="display:none"> 
 
     <!-- Test Proměných -->
@@ -37,6 +38,7 @@
     <!-- h2 -> vypisování formátovaného JSON pro zpracovávání -->
     <h2 v-for="data in todayData()" :key="data.date">
       <b>{{data.title}}</b> - {{data.content}} - <i>{{data.date}}</i>
+      
     </h2>
 
     <!-- Vypisování neformátovaných JSON dat na dynamicky měněný datum -->
@@ -77,6 +79,9 @@ export default {
         return this.jsondata.filter(
           jsondata => jsondata.date == datum);
       },
+       getImgUrl(pic) {
+        return require('../assets/img/'+pic);
+        },
 
       
     increment(){