Currently working on a web application that features a grade calculator allowing users to add and delete grades, all saved in local storage. However, encountering an issue where attempting to delete a specific grade ends up removing the most recently added grade instead. How can I accurately target and remove a particular integer from an array?
<template>
<div>
<h2>Grade Calculator</h2>
<div>
<ul>
<li v-for="(grade, index) in grades" :key="index">
{{index+1}}. Grade: {{grade}}
<button v-on:click="deleteGrade(index)">Delete</button>
</li>
</ul>
<div>
<label>New Grade:</label>
<input type="text" v-model="newGrade" />
<button v-on:click="addGrade()">Add</button>
</div>
<br />
<div>
<p>Average: {{ calculateAverage() | round}}</p>
</div>
</div>
</div>
</template>
<!-- The Script-->
<script>
export default {
data() {
return {
grades: [],
newGrade: null,
average: 0,
formattedNumber: ""
};
},
name: "Home",
methods: {
deleteGrade(index) {
this.grades.splice(index, 1);
localStorage.removeItem("grades");
localStorage.setItem("grades", JSON.stringify(this.grades));
}
},
mounted() {
this.grades = JSON.parse(localStorage.getItem("grades")) || [];
},
};
</script>