我正在使用Amount
中的computed
创建vuejs
的表的简单汇总,但是出现问题
[Vue警告]:渲染错误:“ TypeError:this.input.reduce不是函数”
还是,我无法用我的代码弄清楚。
//我的Vue js
<pre>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Current_id</th>
<th>Date</th>
<th>Description</th>
<th>Amount</th>
<th colspan="2">Modify</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,key) in users">
<td>{{ user.user.name }}</td>
<td>{{ user.date }}</td>
<td>{{ user.description }}</td>
<td>${{ user.amount }}</td>
<td @click.prevent="editUser(key)">
<span class="btn btn-info">Edit</span>
</td>
<td @click.prevent="remove(user.id)">
<span class="btn btn-danger">Delete</span>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<p>Total of Amount {{ total }}</p>
</div>
</pre>
//我的Script
文件
<pre>
data() {
return {
users: [],
input: {
date: "",
description: "",
amount: ""
},
edit: false,
add: true,
}
},
computed: {
total() {
return this.input.reduce((total, item) => {
return total + item.amount;
}, 0);
}
},
</pre>
有帮助吗?谢谢...