[英]“this.grades.push is not a function” When trying to add a Grade to an array
嗨,我正在创建一个 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>
Web 存储存储字符串,所以问题出在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
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.