teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

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

2020/08/08 03:47

投稿

kyoto-taichi
kyoto-taichi

スコア10

title CHANGED
File without changes
body CHANGED
@@ -78,81 +78,82 @@
78
78
  スクリプトタグ内で計算して表示させる方法をご存知の方がいれば教えて頂けますと幸いです。
79
79
  どうぞ宜しくお願いします。
80
80
 
81
- ```ここに言語を入力
81
+ ```Vue.js コンポーネント
82
82
  <template>
83
83
  <div class="container">
84
84
  <h2>ここで合計金額を表示したい!!</h2>
85
- <div class="row justify-content-center">
85
+ <table class="table table-hover">
86
- <div class="col-sm-6">
86
+ <thead class="thead-light">
87
- <form v-on:submit.prevent="submit">
88
- <div class="form-group row">
89
- <label for="year" class="col-sm-3 col-form-label">Year</label>
90
- <input type="text" class="col-sm-9 form-control" id="year" v-model="cost.year" />
91
- </div>
92
- <div class="form-group row">
93
- <label for="month" class="col-sm-3 col-form-label">Month</label>
94
- <input type="text" class="col-sm-9 form-control" id="month" v-model="cost.month" />
95
- </div>
96
- <div class="form-group row">
97
- <label for="day" class="col-sm-3 col-form-label">Day</label>
98
- <input type="text" class="col-sm-9 form-control" id="day" v-model="cost.day" />
99
- </div>
100
- <div class="form-group row">
101
- <label for="account-name" class="col-sm-3 col-form-label">Account</label>
102
- <select class="col-sm-9 form-control" id="account" v-model="cost.accountName">
103
- <option
87
+ <tr>
104
- v-for="(account, index) in accounts"
88
+ <th scope="col">id</th>
105
- :key="index"
106
- v-bind:value="account.accountKanji"
89
+ <th scope="col">account</th>
90
+ <th scope="col">price</th>
91
+ <th scope="col">journal</th>
92
+ <th scope="col">year</th>
93
+ <th scope="col">month</th>
107
- >{{ account.accountKanji }}</option>
94
+ <th scope="col">day</th>
108
- </select>
109
- </div>
110
- <div class="form-group row">
95
+ <th scope="col">Watch</th>
111
- <label for="price" class="col-sm-3 col-form-label">Price</label>
112
- <input type="text" class="col-sm-9 form-control" id="price" v-model="cost.price" />
113
- </div>
114
- <div class="form-group row">
115
- <label for="journal" class="col-sm-3 col-form-label">Journal</label>
116
- <input type="text" class="col-sm-9 form-control" id="journal" v-model="cost.journal" />
117
- </div>
118
- <button type="submit" class="btn btn-primary">Submit</button>
119
- </form>
96
+ </tr>
97
+ </thead>
98
+ <tbody>
99
+ <tr v-for="(cost, index) in costs" :key="index">
100
+ <th scope="row">{{ cost.id }}</th>
101
+ <td>{{ cost.accountName }}</td>
102
+ <td>{{ cost.price }}</td>
103
+ <td>{{ cost.journal }}</td>
104
+ <td>{{ cost.year }}</td>
105
+ <td>{{ cost.month }}</td>
106
+ <td>{{ cost.day }}</td>
107
+ <td>
108
+ <router-link v-bind:to="{name: 'cost.detail', params: { costId: cost.id } }">
109
+ <button class="btn btn-primary">Watch</button>
110
+ </router-link>
120
- </div>
111
+ </td>
121
- </div>
112
+ </tr>
113
+ </tbody>
114
+ </table>
122
115
  </div>
123
116
  </template>
124
-
125
117
  <script>
126
118
  export default {
119
+ props: {
120
+ year: Number,
121
+ month: Number,
122
+ day: Number,
123
+ },
127
124
  data: function () {
128
125
  return {
129
- cost: {},
126
+ costs: [],
130
- accounts: [],
127
+ totalAmount: 0,
131
128
  };
132
129
  },
133
130
  methods: {
134
- submit() {
131
+ getCostData() {
132
+ if (this.day === undefined) {
133
+ axios
135
- axios.post("/api/cost/store", this.cost).then((res) => {
134
+ .get("/api/cost/list/" + this.year + "/" + this.month)
135
+ .then((res) => {
136
- this.$router.push({ name: "cost.rec-done" });
136
+ this.costs = res.data;
137
- });
137
+ });
138
+ } else {
139
+ axios
140
+ .get(
141
+ "/api/cost/list/" + this.year + "/" + this.month + "/" + this.day
142
+ )
143
+ .then((res) => {
144
+ this.costs = res.data;
145
+ });
146
+ }
147
+ for (var item in this.costs) {
148
+ totalAmount += this.costs[item]["price"];
149
+ }
138
150
  },
139
- fillDateInfo() {
140
- var now = new Date();
141
- this.cost.year = now.getFullYear();
142
- this.cost.month = now.getMonth() + 1;
143
- this.cost.day = now.getDate();
144
- },
145
- getAccountList() {
146
- axios.get("/api/account/list").then((res) => {
147
- this.accounts = res.data;
148
- });
149
- },
150
151
  },
151
152
  mounted() {
152
- this.getAccountList();
153
+ this.getCostData();
153
- this.fillDateInfo();
154
154
  },
155
155
  };
156
156
  </script>
157
157
 
158
+
158
159
  ```