Q&A
前提・実現したいこと
Vue.jsで表計算をするアプリを制作中です。
「＋」と「ー」のボタンでカウンターの数値が増減し、その合計を表示させるものです。
当初は表の全ての行をHTMLで書いていました。
ただし、コードが長くなるのでv-forでループ処理させることにしました。
すると、数値のカウンター部分は思っていたとおりに動作するのですが、数値の合計を計算するcomputedの部分が思い通りに動作しません。
発生している問題・エラーメッセージ
１行目のカウンターで数値を増減させると、１行目のカウンターの合計数値が１行目の合計欄だけでなく、２行目の合計欄にも表示されてしまいます。
これを、１行目の合計欄には１行目のカウンターの合計を、２行目の合計欄には２行目のカウンターの合計を表示出来るようにしたいです。
※該当するソースコードにはCSSが適用されていないので、表示が崩れています。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 6 <!-- Vue.js(開発用) --> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8</head> 9<body> 10 <table class="table table-bordered"> 11 <!-- 見出し行 --> 12 <thead> 13 <tr> 14 <th class="col-sm"></th> 15 <th class="col-lg bg-light">ゲート①</th> 16 <th class="col-lg">ゲート②</th> 17 <th class="col-lg bg-light">ゲート③</th> 18 <th class="col-lg">ゲート④</th> 19 <th class="col-lg bg-light">ゴール</th> 20 <th class="col-md">総打数</th> 21 <th class="col-md bg-light">加算点</th> 22 <th class="col-md">Total</th> 23 </tr> 24 </thead> 25 <!-- １行目 --> 26 <tbody class="counter"> 27 <tr 28 v-for="(row, index) in rows" 29 :key="index" 30 > 31 <th>{{ row.name }}</th> 32 <th class="bg-light"> 33 <counter-hit v-model="row.countGate1"></counter-hit> 34 </th> 35 <th> 36 <counter-hit v-model="row.countGate2"></counter-hit> 37 </th> 38 <th class="bg-light"> 39 <counter-hit v-model="row.countGate3"></counter-hit> 40 </th> 41 <th> 42 <counter-hit v-model="row.countGate4"></counter-hit> 43 </th> 44 <th class="bg-light"> 45 <counter-hit v-model="row.countGoal"></counter-hit> 46 </th> 47 <th> 48 <div class="sum">{{ sum }}</div> 49 </th> 50 <th class="bg-light"> 51 <div class="addition"></div> 52 </th> 53 <th> 54 <div class="total"></div> 55 </th> 56 </tr> 57 </tbody> 58 </table> 59 60 <!-- Test.js --> 61 <script src="test.js"></script> 62</body> 63</html>
JavaScript
1const counterHit = { 2 props: ['value'], 3 methods: { 4 countUp() { 5 this.$emit('input', this.value + 1); 6 }, 7 countDown() { 8 if ( this.value > 0 ) { 9 this.$emit('input', this.value - 1); 10 } 11 }, 12 }, 13 template: ` 14 <form class="ml-2 mr-2"> 15 打数 16 <div class="form-group input-group"> 17 <div class="input-group-prepend"> 18 <button type="button" @click="countUp" class="btn btn-primary">+</button> 19 </div> 20 <input type="number" v-model="value" min="0" disabled class="form-control"> 21 <div class="input-group-append"> 22 <button type="button" @click="countDown" class="btn btn-secondary">-</button> 23 </div> 24 </div> 25 </form> 26 `, 27}; 28 29new Vue({ 30 el: '.counter', 31 data() { 32 return { 33 rows: [ 34 { 35 name: 'A', 36 countGate1: 0, 37 countGate2: 0, 38 countGate3: 0, 39 countGate4: 0, 40 countGoal: 0, 41 }, 42 { 43 name: 'B', 44 countGate1: 0, 45 countGate2: 0, 46 countGate3: 0, 47 countGate4: 0, 48 countGoal: 0, 49 }, 50 ], 51 }; 52 }, 53 computed: { 54 sum() { 55 return this.rows[0].countGate1 + this.rows[0].countGate2 + this.rows[0].countGate3 + this.rows[0].countGate4 + this.rows[0].countGoal; 56 }, 57 }, 58 components: { 59 'counter-hit': counterHit, 60 }, 61});
試したこと
該当するソースコードではsum()をthis.rows[0].countGate1・・・、としているので１行目の合計が計算されています。
この[0]の箇所を、１行目の時は[0]、２行目の時は[1]となるような処理が必要なのではと考えています。
そこで、sum（）に引数としてrow.indexを渡せば良いのでは？ 、と考えてやってみたのですがダメでした。
回答1件
0
ベストアンサー
index渡す必要があるのはその通りなんだけどcomputedは基本的に引数渡せない。
methodsでやるかコンポーネントを細分化してやる。手っ取り早いのはmethods
html
1 <th> 2 <div class="sum">{{ sum(index) }}</div> 3 </th>
javascript
1 methods: { 2 sum(index) { 3 return ( 4 this.rows[index].countGate1 + 5 this.rows[index].countGate2 + 6 this.rows[index].countGate3 + 7 this.rows[index].countGate4 + 8 this.rows[index].countGoal 9 ); 10 }, 11 }, 12
投稿2020/10/09 03:15
総合スコア3828
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/10/09 11:41
2020/10/12 01:32