vue/cli项目数值计算出错了
<template>
<div>
<table>
<tr>
<td>编号</td>
<td>科目</td>
<td>成绩</td>
<td>操作</td>
</tr>
<tr v-for="(item, index) in lists" :key="item.id">
<td>
{{ item.id }}
</td>
<td>
{{ item.subject }}
</td>
<td v-bind:class="{ color: item.grade < 60 }">
{{ item.grade }}
</td>
<td><a href="#" @click="del(index)">删除</a></td>
</tr>
<tr>
<td colspan="2">总分:{{ total }}</td>
<td colspan="2">平均分{{ ave}}</td>
</tr>
</table>
<form action="">
<p>科目: <input type="text" v-model="course" /></p>
<p>分数: <input type="text" v-model="score" /></p>
<button @click.prevent="add">添加</button>
</form>
</div>
</template>
<script>
export default {
data() {
return {
sum: 0,
num: 0,
n: 0,
course: "",
score: "",
lists: [
{ id: 1, subject: "语文", grade: 46 },
{ id: 2, subject: "英语", grade: 80 },
{ id: 3, subject: "数学", grade: 100 },
],
};
},
computed: {
total() {
//总分
this.lists.forEach((item) => {
this.sum += parseInt(item.grade);
});
return this.sum - this.n;
},
ave() {
// 平均值
this.lists.forEach((item) => {
if (item.id) this.num++;
});
return Number(this.sum - this.n)/Number(this.num);
},
},
watch: {
sum(newsum, oldsum) {
this.n = newsum;
console.log(oldsum);
},
},
methods: {
del(index) {
this.lists.splice(index, 1);
},
add() {
this.lists.push({
id: +new Date() % 100,
subject: this.course,
grade: this.score,
});
(this.score = ""), (this.course = "");
this.num = 0;
},
},
};
</script>
<style>
table {
border-collapse: collapse;
width: 70%;
text-align: center;
float: left;
margin-right: 20px;
}
tr {
height: 50px;
}
table,
tr,
td {
border: 1px solid black;
}
button {
width: 80px;
height: 20px;
background-color: #005b84;
color: azure;
}
.color {
color: red;
}
</style>
ave是计算属性计算平均值,由于前面算总分的时候sum不可以重新赋值我就定义了一个n保存了旧的sum值，相减得出总分数，在ave里面总值和后面算出来的总人数num是正确的可是一把两个数进行运算就会报错，求改正
