When I attempt to delete a register in my application, I encounter a Vue-warn message:
The property or method "key" is referenced during render but is not defined on the instance. Make sure that this property is reactive by initializing it in the data option or for class-based components.
Simply initializing the key variable in the data/return section did not resolve the issue for me.
I also noticed that when the data is deleted from the DB, only half of the row content is removed from the view immediately while the other half remains visible until I navigate away and then reenter the Log component. I'm uncertain if the Vue-warn mentioned above is related to this delete/viewing bug, but there could be a connection.
If anyone has any insights into what might be happening, I would greatly appreciate it.
This code snippet is from my Log.vue file:
<template>
<div class="container">
<log-show-detail v-if="logModalOpen" :logUser="logUser" :logTitle="logTitle" :logType="logType" :logDescription="logDescription" :logDate="logDate" @closeRequest='close'> </log-show-detail>
<log-edit v-if="editModalOpen" :logId="logId" :logUser="logUser" :logTitle="logTitle" :logType="logType" :logDescription="logDescription" :logDate="logDate" @closeRequest='close'></log-edit>
(...)
// The rest of your modified Log.vue file...
</text>
</table>
</div>
<!-- Modal -->
<!-- This part remains unchanged... -->
</div>
</div>
</template>
<script>
import axios from 'axios';
import moment from 'moment';
/* Import statements for ShowDetail and EditLog components */
export default {
name:'Log',
/* Initialize data properties */
/*
Existing data properties...
*/
},
methods:{
/* Define existing methods here... */
},
created(){
this.getLogs();
},
computed: {
/* Existing computed properties... */
},
components:{
/* Register your imported components... */
}
}
</script>