laravel - 由于 [Vue 警告] 在 DELETE 路由上获得 500：避免使用非原始值作为键，而是使用字符串/数字值

Question

我有两个组件以相同的方式工作，用于添加、更新、删除，......但我在这个组件中遇到了删除这个关键问题。我可以添加和更新课堂，但不能删除。我一直看到这个错误：

DELETE http://127.0.0.1:8000/classrooms/4 500 (Internal Server Error)
dispatchXhrRequest @ app.js:285
xhrAdapter @ app.js:119
dispatchRequest @ app.js:724
Promise.then (async)
request @ app.js:531
Axios.(anonymous function) @ app.js:541
wrap @ app.js:984
deleteClassroom @ app.js:1913
click @ app.js:37971
invokeWithErrorHandling @ app.js:40588
invoker @ app.js:40913
original._wrapper @ app.js:46266
09:49:27.489 app.js:39359 [Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

found in

---> <ClassroomComponent> at resources/js/components/ClassroomComponent.vue
       <Root>
warn @ app.js:39359
_createElement @ app.js:42115
createElement @ app.js:42085
vm._c @ app.js:42216
(anonymous) @ app.js:38011
renderList @ app.js:41362
render @ app.js:38010
Vue._render @ app.js:42270
updateComponent @ app.js:42786
get @ app.js:43197
run @ app.js:43272
flushSchedulerQueue @ app.js:43030
(anonymous) @ app.js:40714
flushCallbacks @ app.js:40640
Promise.then (async)
timerFunc @ app.js:40667
nextTick @ app.js:40724
queueWatcher @ app.js:43122
update @ app.js:43262
notify @ app.js:39470
mutator @ app.js:39622
(anonymous) @ app.js:1918
Promise.catch (async)
deleteClassroom @ app.js:1917
click @ app.js:37971
invokeWithErrorHandling @ app.js:40588
invoker @ app.js:40913
original._wrapper @ app.js:46266
09:49:27.491 

我的 ClassroomComponent.vue 是：

<template>
...
<table class="table" v-if="classrooms">
            <thead>
            <tr>
                <th>id</th>
                <th>Classroom number</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(classroom, index) in classrooms" :key="index">
                <td>{{classroom.id}}</td>
                <td>{{classroom.description}}</td>
                <td><button @click="loadUpdateClassroomModal(index)" class="btn btn-info">Edit</button></td>
                <td><button @click="deleteClassroom(index)" class="btn btn-danger">Delete</button></td>
            </tr>
            </tbody>
        </table>
...
</template>
<script>
export default {
    data(){
        return {
            classroom:{
                description: ''
            },
            classrooms: [],
            uri: 'http://127.0.0.1:8000/classrooms/',
            errors: [],
            new_update_classroom: [],
            toastr: toastr.options = {"positionClass": "toast-top-full-width"}

        }
    },

    methods: {

        ...

        deleteClassroom(index){
            let confirmBox = confirm("Do you really want to delete this?");

            if(confirmBox == true){
                axios.delete(this.uri + this.classrooms[index].id)
                    .then(response=>{
                        this.$delete(this.classrooms, index);
                        toastr.success(response.data.message);
                    }).catch(error=>{
                        this.errors.push(error);
                });
            }
        },

        loadClassrooms(){
            axios.get(this.uri).then(response=>{
                this.classrooms = response.data.classrooms;
            });
        },

        resetClassroomData(){
            this.classroom.description = '';
        }

    },

    mounted(){
        this.loadClassrooms();
    }
}
</script>
<>

正如我所说，我有另一个组件完全使用相同的结构。我不明白。我试图在这里找到一些答案：[Vue warn]: Avoid using non-primitive value as key, use string/number value instead , Avoid using non-primitive value as key, use string/number value instead。在 VueJS等中，没有什么可以向我解释这一点。

标签： laravelvue.js