Laravel 6 and Vue.js update record from child component using vue-router and axios

Question

I have been stuck on update method using Vue Components for over a week. The update happens after a user clicks the "update" button, opening a modal. From the modal, the child component value is updating but I can't get the data to send to the DB (MySQL). Any help would be greatly appreciated.

Component:

<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>

SCRIPT:

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();
            });
        }
    },
}

Controller:

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;
}

UPDATE: In case there was any confusion, I am hitting the correct route and function but can't pass the updated information causing an SQL error that fields can't be null.

Thank you for you help.

Are you getting any errors in the console? Have you checked the network tab to make sure it's going to the correct route? — Rwd
– Rwd, Commented Dec 23, 2019 at 16:10
PUT 127.0.0.1:8000/groups/1 500 (Internal Server Error) is the error I get in the console — odenforce89
– odenforce89, Commented Dec 23, 2019 at 16:14
It looks like you are submitting via <form @submit.prevent="editGroup(post)"> and <button type="button" class="btn btn-success" data-dismiss="modal" @click="update(post)"> Save </button> at the same time. I believe you should submit either via form or via button, but not both at the same time — livreson ltc
– livreson ltc, Commented Dec 23, 2019 at 16:25
correct, however, i can only update the component on front end. I can't get the update to send to the controller. Keeps saying the data fields are empty..... — odenforce89
– odenforce89, Commented Dec 23, 2019 at 16:27

Jason · Accepted Answer · 2019-12-23 22:26:36Z

1

As far as I can see, you're not submitting any data to your route.

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

You're not supplying the values of the post variable to your axios call. You need to add the object you are sending as the second parameter to your put(...) call.

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

Edit: Be sure you validate your data when it arrives!

answered Dec 23, 2019 at 22:26

Jason

3,0402 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Laravel 6 and Vue.js update record from child component using vue-router and axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related