我正在尝试更新来自 Vue.js Laravel 应用程序上的子组件的数据，但出于某种原因，我无法直接工作。检查员给的返回告诉我
Creating default object from empty value
父组件打开了一个模态，它是一个子组件，然后信息必须通过 update() 方法更新。有人可以帮助我了解我所缺少的吗？
这基本上是我的数据库的 img，以便了解它的结构:
这些方法在我的父组件 Log.vue 中，这就是我将数据从父组件传递到子组件的方式:
<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>
这是 EditLog.vue，它是从上面的父级接收数据的子组件:
<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>
这是日志 routes/api.php
Route::patch('/logs/{id}','LogController@update');
这是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();
}
关于如何让它发挥作用的任何线索？
最佳答案
我在这里注意到的几点可能太大而无法发表评论。
首先，不是传递 log 的所有单独属性通过 <edit-log>组件，只传递整个对象可能更容易？
<edit-log :log="log"></edit-log>
其次，您似乎没有将发送的 prop 数据绑定(bind)到 <edit-log>到 data在那个组件上。我不认为你可以直接对 Prop 进行 v-model。
第三，我认为您在 <edit-log> 中的哪个位置进行更新组件，你只需要像this.log一样传递数据而不是 this.$data.log .
所以你的 <edit-log>完整的看起来像这样
<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="log.title">
<br>
<label>Type:</label>
<select v-model="log.type" 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="log.description"></textarea>
</div>
<div class="modal-footer">
<button d="log-it" type="button" class="btn btn-circle btn-xl" @click="update()">
<span><b>EDIT</b></span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name:'EditLog',
props:['initiaLog'],
data(){
return{
log:this.initialLog,
errors:{}
}
},
methods:{
close(){
this.$emit('closeRequest');
},
update(){
window.axios.patch(`/develogger-app/public/api/logs/${this.logId}`,this.log)
.then((response)=> this.close())
.catch((error) => this.errors = error.response.data.errors)
}
}
}
</script>
你会像这样调用初始化
<log-edit v-if="editModalOpen" :initial-log="log" @closeRequest='close'></log-edit>
关于javascript - 从子组件更新数据 - Vue.js/Axios/Laravel，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53119025/