“this.grades.push 不是函数”尝试将成绩添加到数组时

Question

您好，我正在创建一个 web 应用程序，我可以在其中列出我的成绩并取其平均值，但我无法使用按钮将任何成绩添加到我的数组中。当我单击添加按钮时，我收到错误消息：

TypeError: this.grades.push is not a function

at VueComponent.addGrade (Calculator.vue?1876:54)

at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-

我也在尝试将成绩保存在本地存储中。我做错了什么？

我正在使用 Vue.js 和 js 做任何事情。 代码如下：

<template>
  <div>
    <h2>Grade-Calculator</h2>
    <div>
      <ul>
        <li v-for="(g,idx) in grades" :key="idx">
          {{idx+1}}. Grade : {{g}}
          <button v-on:click="delGrade()">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: {{ calcAvg() | round}}</p>
      </div>
    </div>
  </div>
</template>
<!-- The Script-->
<script>
export default {
  data: () => ({
    grades: [],
    newGrade: 0,
    avg: 0,
    formattedNumber: ""
  }),
  name: "Home",
  props: {},

  methods: {
    calcAvg: function() {
      let sum = 0;
      for (var i = 0; i < this.grades.length; i++) {
        let num = parseInt(this.grades[i]);
        sum = sum + num;
      }
      console.log(sum);
      console.log(this.grades.length);
      return sum / this.grades.length;
    },
    addGrade: function() {
      if (this.grades == null) {
        this.grades = [];
      }
      this.grades.push(this.newGrade);
      this.newGrade = 0;
      localStorage.setItem("grades", this.grades);
    },
    delGrade: function() {
      var idx = this.grades.indexOf(this.grades);
      this.grades.splice(idx);
      localStorage.removeItem("grades");
      localStorage.setItem("grades", this.grades);
    }
  },
  mounted() {
    this.grades = localStorage.getItem("grades");
  },
  filters: {
    round: function(value) {
      value = parseFloat(value).toFixed(2);
      //this.formattedNumber = this.avg.toFixed(2);
      return value;
    }
  }
};
</script>

Answer 1

网络存储存储字符串，所以问题出在mounted：

this.grades = localStorage.getItem("grades");

现在，this.grades 是一个字符串，它没有 push 方法。

将您的数组存储为 JSON：

localStorage.setItem("grades", JSON.stringify(this.grades));

并在检索时对其进行解析：

this.grades = JSON.parse(localStorage.getItem("grades")) || [];

如果项目不在存储中，|| [] 部分会为您提供一个空白数组（getItem 返回null，它将转换为"null"，然后由JSON.parse 解析回null ，这是假的）。