編集履歴

質問編集履歴

改修対象のソースについて修正

2020/08/08 03:47

投稿

kyoto-taichi

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -158,7 +158,7 @@
-```ここに言語を入力
+```Vue.js コンポーネント
 <template>
@@ -166,97 +166,91 @@
     <h2>ここで合計金額を表示したい！！</h2>
-    <div class="row justify-content-center">
-      <div class="col-sm-6">
-        <form v-on:submit.prevent="submit">
-          <div class="form-group row">
-            <label for="year" class="col-sm-3 col-form-label">Year</label>
-            <input type="text" class="col-sm-9 form-control" id="year" v-model="cost.year" />
-          </div>
-          <div class="form-group row">
-            <label for="month" class="col-sm-3 col-form-label">Month</label>
-            <input type="text" class="col-sm-9 form-control" id="month" v-model="cost.month" />
-          </div>
-          <div class="form-group row">
-            <label for="day" class="col-sm-3 col-form-label">Day</label>
-            <input type="text" class="col-sm-9 form-control" id="day" v-model="cost.day" />
-          </div>
-          <div class="form-group row">
-            <label for="account-name" class="col-sm-3 col-form-label">Account</label>
-            <select class="col-sm-9 form-control" id="account" v-model="cost.accountName">
-              <option
-                v-for="(account, index) in accounts"
-                :key="index"
-                v-bind:value="account.accountKanji"
-              >{{ account.accountKanji }}</option>
-            </select>
-          </div>
-          <div class="form-group row">
-            <label for="price" class="col-sm-3 col-form-label">Price</label>
-            <input type="text" class="col-sm-9 form-control" id="price" v-model="cost.price" />
-          </div>
-          <div class="form-group row">
-            <label for="journal" class="col-sm-3 col-form-label">Journal</label>
-            <input type="text" class="col-sm-9 form-control" id="journal" v-model="cost.journal" />
-          </div>
-          <button type="submit" class="btn btn-primary">Submit</button>
-        </form>
-      </div>
-    </div>
+    <table class="table table-hover">
+      <thead class="thead-light">
+        <tr>
+          <th scope="col">id</th>
+          <th scope="col">account</th>
+          <th scope="col">price</th>
+          <th scope="col">journal</th>
+          <th scope="col">year</th>
+          <th scope="col">month</th>
+          <th scope="col">day</th>
+          <th scope="col">Watch</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(cost, index) in costs" :key="index">
+          <th scope="row">{{ cost.id }}</th>
+          <td>{{ cost.accountName }}</td>
+          <td>{{ cost.price }}</td>
+          <td>{{ cost.journal }}</td>
+          <td>{{ cost.year }}</td>
+          <td>{{ cost.month }}</td>
+          <td>{{ cost.day }}</td>
+          <td>
+            <router-link v-bind:to="{name: 'cost.detail', params: { costId: cost.id } }">
+              <button class="btn btn-primary">Watch</button>
+            </router-link>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 <script>
 export default {
+  props: {
+    year: Number,
+    month: Number,
+    day: Number,
+  },
   data: function () {
     return {
-      cost: {},
+      costs: [],
-      accounts: [],
+      totalAmount: 0,
     };
@@ -264,45 +258,51 @@
   methods: {
-    submit() {
+    getCostData() {
+      if (this.day === undefined) {
+        axios
-      axios.post("/api/cost/store", this.cost).then((res) => {
+          .get("/api/cost/list/" + this.year + "/" + this.month)
+          .then((res) => {
-        this.$router.push({ name: "cost.rec-done" });
+            this.costs = res.data;
-      });
+          });
+      } else {
+        axios
+          .get(
+            "/api/cost/list/" + this.year + "/" + this.month + "/" + this.day
+          )
+          .then((res) => {
+            this.costs = res.data;
+          });
+      }
+      for (var item in this.costs) {
+        totalAmount += this.costs[item]["price"];
+      }
     },
-    fillDateInfo() {
-      var now = new Date();
-      this.cost.year = now.getFullYear();
-      this.cost.month = now.getMonth() + 1;
-      this.cost.day = now.getDate();
-    },
-    getAccountList() {
-      axios.get("/api/account/list").then((res) => {
-        this.accounts = res.data;
-      });
-    },
   },
   mounted() {
-    this.getAccountList();
+    this.getCostData();
-    this.fillDateInfo();
   },
@@ -312,4 +312,6 @@
 ```