new Vue({
el: "#app",
data: {
newTest: {
studentName: '',
score: 0
},
tests: [{
studentName: "Billy",
score: 76
}, {
studentName: "Suzy",
score: 85
}, {
studentName: "Johnny",
score: 89
}, {
studentName: "Emma",
score: 93
}]
},
computed: {
average: function() {
var sum = this.tests.reduce(function(acc, test) {
return acc + Number(test.score);
}, 0);
return (sum / this.tests.length).toFixed(2);
}
},
methods: {
addTestScore: function() {
this.tests.push({
studentName: this.newTest.studentName,
score: this.newTest.score
});
this.newTest.studentName = '';
this.newTest.score = 0;
}
}
});
<body>
<div id="app">
<span>Average Score: {{average}}</span>
<ul>
<li v-for="test in tests">
{{test.studentName}} - {{test.score}}
</li>
</ul>
<span>Student</span>
<input v-model="newTest.studentName">
<span>Score</span>
<input v-model="newTest.score">
<button @click="addTestScore">Add</button>
</div>
</body>