I've been struggling to update data from a child component in a Vue.js Laravel application, and for some reason, I can't seem to get it to work correctly. The error message I'm getting in the inspector says:
Creating default object from empty value
The issue arises when the parent component opens a modal (which is a child component) and then attempts to update the information using the update() method. Can anyone help me figure out what I'm overlooking?
Here's an image of how my database is structured:
https://i.sstatic.net/L3KzT.png
The methods are located in my parent component Log.vue, and this is how I pass the data from the parent to the child component:
<log-edit v-if="editModalOpen" :logId="logId" :logUser="logUser" :logTitle="logTitle" :logType="logType" :logDescription="logDescription" :logDate="logDate" @closeRequest='close'></log-edit>
<td @click="openEdit(log.id, log.user, log.title, log.type, log.description, log.created_at)"><i class="fas fa-edit"></i></td>
<script>
methods:{
openEdit(id, user, title, type, description, date){
this.logId = id;
this.logUser = user;
this.logTitle = title;
this.logType = type;
this.logDescription = description;
this.logDate = date;
this.editModalOpen = true;
},
}
<script>
This is the EditLog.vue file, which is the child component receiving data from the parent above:
<template>
<div class="container">
<div id="overlay">
<div class="edit-detail-window">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">{{logTitle}}</h3>
<button type="button" class="close">
<i class="fas fa-times" @click="close"></i>
</button>
</div>
<div id="show-detail-modal-body" class="modal-body">
<br>
<label>Title:</label>
<input class="form-control" type="text" v-model="logTitle">
<br>
<label>Type:</label>
<select v-model="logType" class="form-control" ><br>
<option value="" disabled selected>Type</option>
<option>Client Update</option>
<option>Dev Update</option>
<option>Bug</option>
<option>Style Fix</option>
</select>
<br>
<label>Description:</label>
<textarea class="form-control" cols="30" rows="5" v-model="logDescription"></textarea>
</div>
<div class="modal-footer">
<button d="log-it" type="button" class="btn btn-circle btn-xl" @click="update(logTitle, logType, logDescription)">
<span><b>EDIT</b></span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name:'EditLog',
props:['logId','logUser','logTitle','logType','logDescription','logDate'],
data(){
return{
log:{title:'',type:'',description:''},
errors:{}
}
},
methods:{
close(){
this.$emit('closeRequest');
},
update(title,type,description){
this.log.title = title;
this.log.type = type;
this.log.description - description;
window.axios.patch(`/develogger-app/public/api/logs/${this.logId}`,this.$data.log).then((response)=> this.close())
.catch((error) => this.errors = error.response.data.errors)
}
}
}
</script>
This is the code snippet from Log routes/api.php:
Route::patch('/logs/{id}','LogController@update');
And here is the update function in LogController.php:
public function update($id, Request $request){
$log = Log::find($request->id);
$log->title = $request->logTitle;
$log->type = $request->logType;
$log->description = $request->logDescription;
$log->save();
}
Any suggestions on how to resolve this issue would be greatly appreciated.