チェックした明細行の金額の合計額を計算する方法について

前提・実現したいこと

行追加が可能な明細で、チェックボックスをつけた行の金額だけを計算して赤枠部の合計欄に表示したいです。

画像例ですと、チェックをつけている2行目、3行目のみ金額の合計の計算を行いたいのですが、
私の勉強が足りないため、WEBを検索してもどのように行えばいいのかが理解できませんでした。

方法をご教示いただけますと幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang='ja'>
3<head>
4    <meta charset='UTF-8'>
5    <title>sample1</title>
6</head>
7<body>
8<div id='app'>
9    <div>
10        <h1>sample</h1>
11        <table class='table'>
12            <thead>
13                <tr>
14                    <th><input type='checkbox'></input></th>
15                    <th>商品名</th>
16                    <th>単価</th>
17                    <th>数量</th>
18                    <th>消費税率</th>
19                    <th>消費税額</th>
20                    <th>合計金額</th>
21                </tr>
22            </thead>
23            <tbody>
24                <tr v-for='(detail,index) in details' v-bind:key='detail.id'>
25                    <th><input type='checkbox'></input></th>
26                    <th><input type='text'></th>
27                    <th><input type='number' v-model.number='detail.unitPrice' style="text-align:right"></th>
28                    <th><input type='number' v-model.number='detail.num' style="text-align:right" ></th>
29                    <th><input type='number' v-model.number='detail.rate' style="text-align:right"></th>
30                    <th>{{ (detail.unitPrice * detail.num * detail.rate/100).toLocaleString()}} </th>
31                    <th>{{ ((detail.unitPrice * detail.num ) + (detail.unitPrice * detail.num * detail.rate/100)).toLocaleString() }} </th>
32                    <th><button @click='deleteRow(index)'>削除</button></th>
33                </tr>
34            </tbody>
35        </table>
36        <button @click='addRow'>行を追加</button>
37        <p>税抜額計{{ totalPrice.toLocaleString() }}円</p>
38        <p>消費税計{{ totalTax.toLocaleString() }}円</p>
39        <p>税込額計{{ totalPriceWithTax.toLocaleString() }}円</p>
40    </div>
41</div>
42<script src='https://unpkg.com/vue'></script>
43</body>
44
45<script>
46    var app = new Vue({
47    el: '#app',
48    data() {
49        return{
50            details:[{
51                unitPrice:'',
52                num:'',
53                rate:10
54            }]
55        }
56    },
57    computed:{
58        //税抜金額計
59        totalPrice:function(){
60            return this.details.reduce((sum, detail) => sum + detail.unitPrice * detail.num, 0);
61        },
62        //消費税計
63        totalTax:function(){
64            return this.details.reduce((sum, detail) => sum + detail.unitPrice * detail.num * detail.rate/100, 0);
65        },
66        //税込額計
67        totalPriceWithTax:function(){
68             return this.details.reduce((sum, detail) => sum + (detail.unitPrice * detail.num ) + (detail.unitPrice * detail.num * detail.rate/100), 0); 
69        }
70    },
71    methods:{
72        //行追加
73        addRow:function(){
74            this.details.push({
75                unitPrice:'',
76                num:'',
77                rate:10
78            })
79        },
80        //行削除
81        deleteRow:function(index){
82            this.details.splice(index,1)
83        }
84    }  
85})
86</script>
87
88<style>
89.table {
90    border: 1px solid #eee;
91    border-collapse: collapse;
92}
93.table th,
94.table td {
95    border: 1px solid #dedede;
96    padding: .5em;
97    text-align: center;
98}
99
100</style>
101</html>

補足情報（FW/ツールのバージョンなど）

Vueのバージョンは2.6.14を使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

details にフラグを追加して、チェックボックスをv-modelでバインディングして、computedで details をfilterで絞り込むのがいいように思えます。

js
1return this.details.filter(x => x.checked) ...

投稿2021/10/19 08:32

Lhankor_Mhy

総合スコア36163

firstLast1012

2021/10/19 08:55

大変申し訳ございません。私の理解が足りず、記載されている内容を全て理解することができませんでした。どのように記述すべきでしょうか。

Lhankor_Mhy

2021/10/19 08:58

return this.details.filter(x => x.checked).reduce((sum, detail) => sum + detail.unitPrice * detail.num, 0) ということです。他のcomputedプロパティも同様に .filter(x => x.checked) を挿入してください。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

firstLast1012

2021/10/20 01:22

ご丁寧にご教示いただき、ありがとうございます。 .filterと.reduceを同時に使用する方法でつまづいておりましたが、教えていただいた方法で行うことができました。

Lhankor_Mhy

2021/10/20 01:26

お役に立てたようで何よりです

行動規範の内容に同意します