Javascript 将JSON响应从Axios传递到数据对象，但出现错误

我试图将得到的JSON响应传递回空数据对象以显示搜索结果，并得到

typeerror:arr.slice不是函数

错误。如果将JSON直接添加到“schools”数据对象中，则不会出现错误。我认为这可能和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>

---

似乎

SchoolList

组件需要一个数组，因此您只需更改行即可

this.schools = response.data

到

this.schools=response.data.hit

---

虽然，这取决于组件的构建方式。

您使用的是

schoolData

，它看起来未定义，您确定粘贴了所有代码吗？啊，当我删除代码时，我从一个名为“data”的静态文件导入JSON。//从“../data”导入{schoolData as schoolData}。无论哪种方式，删除引用似乎都不会改变任何东西。发生错误的原因可能是返回的json不是数组，而是对象。尝试

this.schools=[response.data]。看起来更合适。哦，就是这样。。。非常感谢！现在还有一个问题。。。因为返回的JSON被包装在数组“hit”中，并且我的代码不需要数组，所以它只返回1个结果（它认为是“hit”）。我怎样才能迫使它更深一层呢？可能是
this.schools=response.data.hit
，但这取决于
SchoolList
组件。
this.schools = response.data