I have two components working in the same way for add, update, delete,... but I'm having this key problem with the Delete only in this component. I can add and update a Classroom, but I can't delete. I keep seeing this error:
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
My ClassroomComponent.vue is:
<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>
<>
As I said, I have another component totally working with the same structure. I don't get it. I tried to find some answer here: [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. in VueJS and etc., and nothing explain to me this.
