Hey everyone, I'm currently working on a website that includes a home page and a specific 'Brazil' component. To switch between the two, I am using vue router. Within the Brazil component, there is a calculator feature that should take a grade input from the user and calculate the average once they click on the 'Average' button. While the calculation itself seems to be correct, the buttons are not functioning as expected. Does anyone have any insight into what might be causing this issue? Here's a snippet of the code in question:
<template>
<div>
Brazil
<h2>Grade-Calculator </h2>
<div id="calculator">
<ul>
<li v-for="(g,idx) in grades" :key="idx">{{idx+1}}. Grade : {{g}}</li>
</ul>
<div>
<label>New Grade: </label>
<input type="text" v-model="newGrade" />
<button v-on:click="addGrade()">Ok</button>
</div>
<br>
<div>
<button v-on:click="calcAvg()">Average</button>
<p>Average: {{ sum }}</p>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
name: "Brazil",
props: {}
};
new Vue({
el: '#calculator',
data: {
grades: [],
newGrade: 0,
avg: 0
//TEST
},
methods: {
addGrade: function () {
this.grades.push(this.newGrade)
this.newGrade = 0
},
calcAvg: function () {
let sum = 0;
for (var i = 0; i < this.grades.length; i++) {
let zahl = parseInt(this.grades[i]);
sum = sum + zahl;
}
//calculate average and print it
console.log(sum)
console.log(this.grades.length)
return sum / this.grades.length;
}
}
})
</script>