Laravel 6 和 Vue.js 使用 vue-router 和 axios 从子组件更新记录答案

【问题标题】：Laravel 6 and Vue.js update record from child component using vue-router and axiosLaravel 6 和 Vue.js 使用 vue-router 和 axios 从子组件更新记录
【发布时间】：2020-04-14 21:49:07
【问题描述】：

一个多星期以来，我一直坚持使用 Vue 组件的更新方法。更新发生在用户单击“更新”按钮并打开模式后。从模式中，子组件值正在更新，但我无法获取要发送到数据库（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 错误。

感谢您的帮助。

【问题讨论】：

您是否在控制台中遇到任何错误？您是否检查了网络选项卡以确保它转到正确的路线？
PUT 127.0.0.1:8000/groups/1 500 (Internal Server Error) 是我在控制台中遇到的错误
Route::resource('/groups', 'GroupController');是我的路线
您似乎同时通过<form @submit.prevent="editGroup(post)"> 和<button type="button" class="btn btn-success" data-dismiss="modal" @click="update(post)"> Save </button> 提交。我认为您应该通过表单或按钮提交，但不能同时提交
正确，但是，我只能更新前端的组件。我无法将更新发送到控制器。一直说数据字段是空的.....

标签： php mysql laravel vue.js

【解决方案1】：

据我所知，您没有向您的路线提交任何数据。

update: function (post) {
    var url = 'groups/' + post.id;
    axios.put(url).then(response => {
         this.getGroups();
    });
}

您没有将 post 变量的值提供给您的 axios 调用。您需要将要发送的对象作为第二个参数添加到您的 put(...) 调用中。

axios.put(url, post).then(response => {
    this.getGroups();
});

编辑：确保在数据到达时验证您的数据！

【讨论】：