javascript - 将来自 Axios 的 JSON 响应传递给数据对象但出现错误
问题描述
我正在尝试传递一个 JSON 响应，我返回一个空数据对象以显示搜索结果并收到typeerror: arr.slice is not a function错误。如果我将 JSON 直接添加到“学校”数据对象，我不会收到错误消息。我认为这可能与 JSON 的格式有关？一切都包含在一个名为“hit”的数组中，我认为我的代码并不期待这一点。
这是我的主要 App.vue 文件：
<template>
<div class="app search">
<!-- Search header -->
<header id="searchHeader" class="search--header py-2 py-md-4">
<div class="container">
<div class="input-group">
<!-- Search box -->
<SearchBox v-model="searchTerm"/>
<!-- Search button -->
<button v-on:click="searchSubmit(searchTerm)" class="btn btn-lg btn-white ml-2 px-4 search-submit">Search</button>
</div>
</div>
</header>
<!-- Main results -->
<div class="container">
{{ dataReceived }}
<!-- Result count and show/sort -->
<ResultCount v-model="page" :items="schools.length" :perPage="10"/>
<!-- Results -->
<SchoolList :schools="pageOfSchools"/>
</div>
</div>
</template>
<script>
import SchoolList from './SchoolList'
import SearchBox from './SearchBox'
import getArraySection from '../utilities/get-array-section'
export default {
name: 'app',
components: {SchoolList, SearchBox},
data: () => ({
searchTerm: '',
type: '',
//schools: [{"found": 18, "start": "0", "cursor": "", "returned": 18, "hit": [ { "name": "State Peter Pan Institute", "city": "New Burniceshire", "state": "Illinois", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/10/State Peter Pan Institute", "schoolLogo": 10 }, { "name": "State Flatland University", "city": "New Ulices", "state": "Maryland", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/75/State Flatland University", "schoolLogo": 75 }, { "name": "State Applewood Halls of Ivy", "city": "East Karimouth", "state": "West Virginia", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/89/State Applewood Halls of Ivy", "schoolLogo": 89 }, { "name": "State Packer Institute", "city": "New Lura", "state": "Wyoming", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/118/State Packer Institute", "schoolLogo": 118 }, { "name": "State Mandingo Academy", "city": "Port Tomas", "state": "Kentucky", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/129/State Mandingo Academy", "schoolLogo": 129 }, { "name": "State Flatland Center", "city": "East Emmettside", "state": "Vermont", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/137/State Flatland Center", "schoolLogo": 137 }, { "name": "State Northern Alma Mater", "city": "Blairville", "state": "WY", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/314/State Northern Alma Mater", "schoolLogo": 314 }, { "name": "State Caper Alma Mater", "city": "Fayburgh", "state": "KS", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/323/State Caper Alma Mater", "schoolLogo": 323 }, { "name": "State Fish Center", "city": "West Yesseniachester", "state": "NC", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/357/State Fish Center", "schoolLogo": 357 }, { "name": "State Pump College", "city": "Saraichester", "state": "NE", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/416/State Pump College", "schoolLogo": 416 }, { "name": "State Collage School", "city": "Laceyfort", "state": "NE", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/431/State Collage School", "schoolLogo": 431 }, { "name": "State Mimosa Lyceum", "city": "Roobville", "state": "NC", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/466/State Mimosa Lyceum", "schoolLogo": 466 }, { "name": "State Collage Seminary", "city": "Cortezborough", "state": "GA", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/469/State Collage Seminary", "schoolLogo": 469 }, { "name": "State Fellowship University", "city": "Olsonside", "state": "NV", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/470/State Fellowship University", "schoolLogo": 470 }, { "name": "State Tomcat Institute", "city": "West Manuelburgh", "state": "GA", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/479/State Tomcat Institute", "schoolLogo": 479 }, { "name": "State Literature University", "city": "North Lorenza", "state": "CT", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/481/State Literature University", "schoolLogo": 481 }, { "name": "State Packer Center", "city": "Port Corbin", "state": "AK", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/496/State Packer Center", "schoolLogo": 496 }, { "name": "State Allegheny Halls of Ivy", "city": "Port Sisterville", "state": "OK", "areasofstudy": "Bachelor's", "degreetype": "BACHELORS", "studenttype": "UG", "schoolsnprograms": "state", "schoolsize": "1", "isCustomer": "0", "schoolUrl": "http://localhost/school/571/State Allegheny Halls of Ivy", "schoolLogo": 571 } ]}],
schools: [],
page: 1,
dataReceived: []
}),
computed: {
pageOfSchools: function () {
return getArraySection(this.schools, this.page, 10)
}
},
mounted() {
axios.post("/search/college", {
"search": {"terms": ["state"]}
})
.then(response => {
this.dataReceived = response.data
this.schools = response.data
console.log(response.data)
})
},
methods: {
filterSchools: function () {
const searchTerm = this.searchTerm.toLowerCase()
const type = this.type
let result = schoolData
if (searchTerm) {
result = result.filter(school => {
return (
school.title.toLowerCase().search(searchTerm) >= 0 ||
school.location.toLowerCase().search(searchTerm) >= 0
)
})
}
if (type) {
result = result.filter(school => school.type.indexOf(type) >= 0)
}
this.schools = result
this.page = 1
}
},
created: function () {
this.filterSchools()
}
}
</script>
这是正在传递的 JSON：
{
"found": 18,
"start": "0",
"cursor": "",
"returned": 18,
"hit": [{
"name": "State Peter Pan Institute",
"city": "New Burniceshire",
"state": "Illinois",
"areasofstudy": "Bachelor's",
"degreetype": "BACHELORS",
"studenttype": "UG",
"schoolsnprograms": "state",
"schoolsize": "1",
"isCustomer": "0",
"schoolUrl": "http://localhost/school/10/State Peter Pan Institute",
"schoolLogo": 10
}, {
"name": "State Flatland University",
"city": "New Ulices",
"state": "Maryland",
"areasofstudy": "Bachelor's",
"degreetype": "BACHELORS",
"studenttype": "UG",
"schoolsnprograms": "state",
"schoolsize": "1",
"isCustomer": "0",
"schoolUrl": "http://localhost/school/75/State Flatland University",
"schoolLogo": 75
}, {
"name": "State Applewood Halls of Ivy",
"city": "East Karimouth",
"state": "West Virginia",
"areasofstudy": "Bachelor's",
"degreetype": "BACHELORS",
"studenttype": "UG",
"schoolsnprograms": "state",
"schoolsize": "1",
"isCustomer": "0",
"schoolUrl": "http://localhost/school/89/State Applewood Halls of Ivy",
"schoolLogo": 89
}]
}
解决方案
该SchoolList组件似乎需要一个数组，因此您可以简单地更改该行
this.schools = response.data
至
this.schools = response.data.hit
虽然，这取决于组件的构建方式。
推荐阅读
- python - 如何将具有多个依赖项的 C 库编译到 Python 包中？制作？
- angular - Sanitizer Angularerror TS2339：“Sanitizer”类型上不存在属性“bypassSecurityTrustUrl”
- html - 引导按钮文本未调整大小
- google-analytics - Firebase 更改后的 Google Analytics for desktop 应用程序
- swift - 按下表格视图单元格
- c - 按位运算的 CLion“表达式可以简化”消息
- c++ - 无法将左值绑定到转发引用
- ruby - 如何更改 Pry 中对象的输出颜色？
- nodes - 一个节点代表一个用户还是多个用户？
- c# - 用 Linq 替换嵌套循环