I hope the following screenshot goes somewhere to explaining what I'm trying to achieve.
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?
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
});
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?