Autosave for textarea and text boxes using Laravel+Vue

Hey Folks,

I am trying to implement an autosave functionality in my laravel+vue project and I am looking for some starting ideas on implementing this in the right way.

To me these ideas are flawed

Saving as the user types in the text boxes/areas as that leads to multiple requests
May be save once every 3 seconds but what if the user hasn't typed anything

Do I need to combine them both and implement it in a way that doesn't lead to a lot of requests?

I am looking for some guidance here...if you have implemented this in one of your projects.

Best,

tykus

5 years ago

Best Answer

Level 104

You could use a watcher and debounce the handler:

import {debounce} from 'lodash';
export default {
  data: () => {
    return {
      textbox: ''
    }
  },
  watch: {
    textbox: debounce(function(newVal){
      this.autosave(newVal)
    }, 3000)
},

The watcher will only be fired whenever the textbox data property is changed; but the handler function is debounced, so you only ever make a new request every N seconds. This would cover both secnarios.

1 like

madprabh

5 years ago

Level 8

@tykus You are a champion!

Thanks a lot for the help, I have implemented it based on your suggestion and the autosave works like a dream.

I have set the time to 1500ms though and not 3000ms.

Please or to participate in this conversation.