update

vue-json/package.json

@@ -30,7 +30,8 @@
       "eslint:recommended"
     ],
     "parserOptions": {
-      "parser": "@babel/eslint-parser"
+      "parser": "@babel/eslint-parser",
+      "requireConfigFile": false
     },
     "rules": {}
   },

vue-json/src/App.vue

@@ -1,37 +1,16 @@
 <template>
-<div>
   <jsonview/>
-  <ul>
-    <li v-for="jsondata in jsondata" :key="jsondata.date">
-        <b>{{jsondata.title}}</b> - {{jsondata.content}} - <i>{{jsondata.date}}</i>   
-    </li>
-  </ul>
-  <h2 v-for="data in todayData" :key="data.date">
-    <b>{{data.title}}</b> - {{data.content}} - <i>{{data.date}}</i>
-  </h2>
-  </div>
+  
 </template>
 
 <script>
 import jsonview from './components/jsonview.vue'
-import jsondata from './assets/jsondata.json'
 
 export default {
   name: 'App',
   components: {
     jsonview
-  },
-  data() {
-    return {
-      jsondata: jsondata,
-    }
-  },
-  computed: {
-      todayData: function () {
-        return this.jsondata.filter(
-          jsondata => jsondata.date == (new Date().toLocaleDateString()))
-      }
-    }
+  }
 }
 </script>
 

vue-json/src/components/jsonview.vue

@@ -1,24 +1,81 @@
 <template>
+<div>
   <div>
-    <h2>test</h2>
+    <h2>JSON</h2>
     <p> {{ date }} </p>
+    <p> {{ selectedDate }}</p>
+    <p> {{ selectDate(date,numberino)}}</p>
+    <p>{{numberino}}</p>
+    <button @click="increment()">+</button>
+    <button @click="decrement()">-</button>
+    
+  </div>
+
+<div>
+  <ul>
+    <li v-for="jsondata in jsondata" :key="jsondata.date">
+        <b>{{jsondata.title}}</b> - {{jsondata.content}} - <i>{{jsondata.date}}</i> 
+    </li>
+  </ul>
+  <!-- <h3>{{ todayData() }}</h3>
+  <h2 v-for="data in todayData()" :key="data.date">
+    <b>{{data.title}}</b> - {{data.content}} - <i>{{data.date}}</i>
+  </h2> -->
+  <!-- <h3>{{ selectDatum(selectDate(date,numberino) ) }}</h3> -->
+  <h2 v-for="data1 in selectDatum(selectDate(date,numberino))" :key="data1.date">
+    <b>{{data1.title}}</b> - {{data1.content}} - <i>{{data1.date}}</i>
+  </h2>
+  </div>
   </div>
 </template>
 
 <script>
+
+import jsondata from '../assets/jsondata.json'
+
 export default {
   name: 'jsonView',
    data: () => ({
-          date: ''
+          date: '',
+          numberino: 1,
+          jsondata: jsondata
         }),
   methods: {
     printDate: function () {
-             return new Date().toLocaleDateString();
-          }
+             return new Date();
+            //return new Date().toLocaleDateString();
+
+          },
+    selectDate: function(date, days){
+      var result = new Date(date);
+      result.setDate(result.getDate() + days);
+      return result.toLocaleDateString();
+    },
+    increment(){
+    this.numberino += 1;
+    },
+
+    decrement(){
+    this.numberino -= 1;
+    },
+
+    todayData: function () {
+        return this.jsondata.filter(
+          jsondata => jsondata.date == (new Date().toLocaleDateString()))
+      },    
+      selectDatum: function (datum) {
+        return this.jsondata.filter(
+          jsondata => jsondata.date == datum)
+      },
   },
   mounted: function () {
           this.date = this.printDate();
         },
+  computed: {
+      selectedDate: function () {
+        return this.selectDate()
+      }
+    }
 }
 </script>