computedを使用した合計金額について

#![ここに質問の内容を詳しく書いてください。

行追加が可能な明細で、入力した単価と数量を計算し、合計金額を赤枠部に表示したいのですが、
「TypeError: Cannot read properties of undefined」が解決できません。

発生している問題・エラーメッセージ

vue:634 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'unitPrice')"

(found in <Root>)

warn @ vue:634
vue:1906 TypeError: Cannot read properties of undefined (reading 'unitPrice')
    at Vue.totalPrice (index.html:95)
    at Watcher.get (vue:4494)
    at Watcher.evaluate (vue:4596)
    at Proxy.computedGetter (vue:4847)
    at Proxy.eval (eval at createFunction (vue:11698), <anonymous>:3:1809)
    at Vue._render (vue:3572)
    at Vue.updateComponent (vue:4082)
    at Watcher.get (vue:4494)
    at new Watcher (vue:4483)
    at mountComponent (vue:4089)

該当のソースコード

javascript
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"></th>
28                    <th><input type="number" v-model.number="detail.num"></th>
29                    <th><input type="number" v-model.number="detail.rate"></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 }}円</p>
38    </div>
39</div>
40<script src="https://unpkg.com/vue"></script>
41</body>
42
43<script>
44    var app = new Vue({
45    el: '#app',
46    data() {
47        return{
48            details:[{
49                unitPrice:'',
50                num:'',
51                rate:10
52            }]
53        }
54    },
55    //エラー原因↓
56    computed:{
57        totalPrice:function(){
58            return this.detail.unitPrice * this.detail.num
59        }
60    },
61    //エラー原因↑
62    methods:{
63        addRow:function(){
64            this.details.push({
65                unitPrice:'',
66                num:'',
67                rate:10
68            })
69        },
70        deleteRow:function(index){
71            this.details.splice(index,1)
72        }
73    }  
74})
75</script>
76
77<style>
78.table {
79    border: 1px solid #eee;
80    border-collapse: collapse;
81}
82.table th,
83.table td {
84    border: 1px solid #dedede;
85    padding: .5em;
86    text-align: center;
87}
88</style>
89</html>

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

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

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

回答1件

ベストアンサー

totalPriceが合計額の計算になっていないのが原因だと思います。
しかもthis.detailは定義されていないプロパティです。
多分これで思った通りになるのでは？

    computed:{
        totalPrice:function(){
            return this.details.reduce((sum, detail) => sum + detail.unitPrice * detail.num, 0);
        }
    },

投稿2021/10/19 05:25