vuejs-PictureOfDay/result/jsonview.vue

 <template>
<div>
  <!-- jsonhead -> hlavička pro navigaci a změnu datumu      -->
  <div id="jsonhead">
    <h1>JSON</h1>
    <p>Použi navigační tlačítka pro změnu datumu</p>
    <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">  
  <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>
<div id="jsondebug" style="display:none"> 

    <!-- Test Proměných -->
    <p> {{ selectDate(date,numberino) }} </p>
    <p> {{ date }} </p>
    <p> {{ numberino }} </p>

    <!-- Toto je výpis celé JSON "Databáze" -->
    <ul>
      <li v-for="jsondata in jsondata" :key="jsondata.date">
        <b>{{jsondata.title}}</b> - {{jsondata.content}} - <i>{{jsondata.date}}</i> 
      </li>
    </ul>

    <!-- Vypisování JSON dat na dnešní datum -->
    <!-- h3 -> vypisování neformátovaného JSON -->
    <h3>{{ todayData() }}</h3>
    <!-- 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 -->
    <h3>{{ selectDatum(selectDate(date,numberino) ) }}</h3>

  </div>

</div>
</template>

<script>

import jsondata from '../assets/jsondata.json'

export default {
  name: 'jsonView',
   data: () => ({
          date: '',
          numberino: 0,
          jsondata: jsondata
        }),
  methods: {
    printDate: function () {
             return new Date();
            //return new Date().toLocaleDateString();
          },
    selectDate: function(date, days){
      var result = new Date(date);
      result.setDate(result.getDate() + days);
      return result.toLocaleDateString();
    },

    todayData: function () {
        return this.jsondata.filter(
          jsondata => jsondata.date == (new Date().toLocaleDateString()));
      },    
      selectDatum: function (datum) {
        return this.jsondata.filter(
          jsondata => jsondata.date == datum);
      },
       getImgUrl(pic) {
        return require('../assets/img/'+pic);
        },

      
    increment(){
    this.numberino += 1;
    },
    decrement(){
      this.numberino -= 1;
    },
    resetdate(){
      this.numberino = 0;
    },
    showdebug(){
      var x = document.getElementById("jsondebug");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      } 
    }
  },
  mounted: function () {
          this.date = this.printDate();
        },
  computed: {
      selectedDate: function () {
        return this.selectDate();
      }
    }
}
</script>

<style scoped>
h4{
    color: blue;
}
</style>