title: How do I delete a specific number in an Local Storage array?
body: <p>I'm making a webapp with a grades calculator where I can Add grades and delete them. They are saved in a Local Storage. When trying to delete a specifig grade it deletes the grade recently added. How can I specifically delete an int in an Array?</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h2&gt;Grade-Calculator&lt;/h2&gt;
      &lt;div&gt;
        &lt;ul&gt;
          &lt;li v-for="(g,idx) in grades" :key="idx"&gt;
            {{idx+1}}. Grade : {{g}}
            &lt;button v-on:click="delGrade()"&gt;Delete&lt;/button&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div&gt;
          &lt;label&gt;New Grade:&lt;/label&gt;
          &lt;input type="text" v-model="newGrade" /&gt;
          &lt;button v-on:click="addGrade()"&gt;Add&lt;/button&gt;
        &lt;/div&gt;
        &lt;br /&gt;
        &lt;div&gt;
          &lt;p&gt;Average: {{ calcAvg() | round}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;!-- The Script--&gt;
  &lt;script&gt;
  export default {
    data: () =&gt; ({
      grades: [],
      newGrade: null,
      avg: 0,
      formattedNumber: ""
    }),
    name: "Home",
    props: {},
  
    methods: {
      delGrade: function() {
        var idx = this.grades.indexOf(this.grades);
        this.grades.splice(idx);
        localStorage.removeItem("grades");
        localStorage.setItem("grades", this.grades);
      }
    },
    mounted() {
        this.grades = JSON.parse(localStorage.getItem("grades")) || [];
    },
  };
  &lt;/script&gt;
  </code></pre>