[英]Laravel 5.1 + Vue.js - vue-router beforeEach AuthService
[英]Laravel 6 and Vue.js update record from child component using vue-router and axios
一个多星期以来,我一直坚持使用 Vue Components 的更新方法。 更新发生在用户单击“更新”按钮,打开一个模态之后。 从模态来看,子组件值正在更新,但我无法将数据发送到数据库 (MySQL)。 任何帮助将不胜感激。
成分:
<tbody>
<tr v-for="post in posts" :key="post.id">
<th>{{ post.name }}\</th>
<th>{{ post.email }}</th>
<th>{{ post.notes }}</th>
<th>{{ post.id }}</th>
<th>
<button class="" v-on:click="deleteGroup(post)">
<eva-icon name="trash-2" animation="pulse" fill="gray"></eva-icon>
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" :data-target="'#exampleModal' + post.id">
<eva-icon name="edit-2" animation="pulse" fill="gray"></eva-icon>
</button>
<!-- Modal -->
<div class="modal fade" :id="'exampleModal' + post.id" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form @submit.prevent="editGroup(post)">
<div class="container shadow p-4">
<input type="hidden" v-model="post.id"/>
<div class="form-group">
<label for="group-name">Group Name</label>
<input type="text" name="name" class="form-control" v-model="post.name" placeholder="Enter the Group Name"/>
</div>
<div class="form-group">
<label for="email">Send invite Email</label>
<input type="email" name="email" class="form-control" v-model="post.email" placeholder="Enter the email"/>
</div>
<div class="form-group">
<label for="group-image">Group Image</label>
<input type="file" class="form-control" name="image">
</div>
<div class="form-group">
<label for="group-notes">Notes</label>
<textarea class="form-control" name="notes" v-model="post.notes" rows="7"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" data-dismiss="modal" @click="update(post)">
Save
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
</div>
</th>
</tr>
</tbody>
脚本:
export default {
mounted() {
console.log('Component mounted.')
},
data() {
return {
posts: [],
}
},
created() {
this.getGroups();
},
methods: {
getGroups() {
axios.get('/groups')
.then(response => this.posts = response.data);
},
deleteGroup: function (post) {
var url = 'groups/' + post.id;
axios.delete(url).then(response => {
this.getGroups();
});
},
editGroup: function (post) {
var url = 'groups/' + post.id;
axios.get(url).then(response => {
this.getGroups();
});
},
update: function (post) {
var url = 'groups/' + post.id;
axios.put(url).then(response => {
this.getGroups();
});
}
},
}
控制器:
public function update(Request $request, $id)
{
$post = Group::findOrFail($id);
$post->name = $request->name;
$post->email = $request->email;
$post->notes = $request->notes;
$post->save();
return $post;
}
更新:如果有任何混淆,我正在访问正确的路由和函数,但无法传递更新的信息,导致字段不能为空的 SQL 错误。
谢谢你的帮助。
据我所知,您没有向您的路线提交任何数据。
update: function (post) {
var url = 'groups/' + post.id;
axios.put(url).then(response => {
this.getGroups();
});
}
您没有向 axios 调用提供post
变量的值。 您需要将要发送的对象作为第二个参数添加到put(...)
调用中。
axios.put(url, post).then(response => {
this.getGroups();
});
编辑:确保您在数据到达时对其进行验证!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.