[英]Cannot remove the item in an array
我正在尝试获取 API 及其工作,但是当我尝试使用方法“ .pop() ”或“ .slice(0,4 )”删除最后一个数组时,它显示:未捕获(承诺)类型错误:数据。 body.data.pop 不是函数
这是 codeandox https://d8i7m.csb.app/ 上代码的链接
我正在使用 vue 和 vue-resource
<template>
<div class="hello">
<ol>
<li v-for="blog in blogs" :key="blog.id">{{ blog }}</li>
</ol>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
blogs: [],
};
},
created() {
this.$http
.get("https://covidnigeria.herokuapp.com/api")
.then(function (data) {
this.blogs = data.body.data;
console.log(data.body.data);
});
},
};
</script>
这是我工作的图片
我想删除第 6 个数组,只显示 1-5
我是在应用程序中使用 API 的新手。
查看从您的 API 返回的实际数据。 它不是一个数组
{
"data": {
"totalSamplesTested": "535733",
"totalConfirmedCases": 59345,
"totalActiveCases": 7464,
"discharged": 50768,
"death": 1113,
"states": [/* lots of data here */]
}
}
我建议你按键显示你想要的数据
<ol>
<li>{{ blogs.totalSamplesTested }}</li>
<li>{{ blogs.totalConfirmedCases}}</li>
<li>{{ blogs.totalActiveCases}}</li>
<li>{{ blogs.discharged}}</li>
<li>{{ blogs.death}}</li>
</ol>
如果您仍想迭代数据并跳过states
,请创建一个计算属性,该属性返回省略states
所有内容并迭代该属性
<ol>
<li v-for="stat in stats" :key="stat.key">
{{ stat.label }}: {{ stat.dataPoint }}
</li>
</ol>
data: () => ({
blogs: {} // 👈 an empty object, not an array
}),
computed: {
stats: ({ blogs }) => {
const { states, ...stats } = blogs
return Object.entries(stats).map(([ key, dataPoint ]) => ({
key,
dataPoint,
label: `${key[0].toUpperCase()}${key.slice(1).replace(/[A-Z]/g, " $&")}`
}))
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.