Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mstnorris's avatar

Vuejs post http dynamic update

I hope the following screenshot goes somewhere to explaining what I'm trying to achieve.

Dropzone - Vuejs - Image upload

When the user uploads some images, they are displayed automatically below inside a Boostrap 4 card, and a form with two inputs - title and caption. I would like for the title and caption to be updated and saved as the user types. I know I'd need to make use of the Vuejs debounce attribute. But how do I do the http POST request and the Laravel server side of things?

I'm using Eloquent and the model is called Photo.

0 likes
3 replies
infernobass7's avatar

If you don't have it already set up, I would recommend putting your card at the bottom into a child component that is setup on a v-for. This makes it easier to handle the specific data for the card. Then in the component I would add methods that are executed after the user leaves the input field and would send the following request

    this.$http.post('/api/req-submit',
    {
        '_token': this.token, //This is the csrf token that is generated by Laravel
        'title':this.title,
        'caption':this.caption,
    }).then(function(data) {
        //Function on success
    }.bind(this), function(data){
        //Function on failure
    });
mstnorris's avatar

It isn't a component at the moment, I agree it should be. I'm yet to get my head around how to implement components. I'm about 70% there, just need to re-watch the lessons. Thank you, I'll give this a go.

How do I handle the update part on the server? Is that just a normal update request?

infernobass7's avatar

I used a post route to handle the request. The majority of the post requests that I handle with Vue I have to pass to another server.

Please or to participate in this conversation.