VueJS , LoDash debounce watch on entire form

I’m trying to get LoDash debounce to work to trigger an event when a user stops typing on a form.

Something similar to this guide

Except I want to apply it to the entire form/model properties.

At the moment the debounce never fires.

    new Vue({
  el: "#app",
  data() {
    return {
      form: {
        user: {
          name: "Bob",
          email: "Test@test.com"
        }
      },
      isTyping: false,
      isLoading: false,
    }
  },
  watch: {
    form: _.debounce(function() {
      this.isTyping = false;
    }, 1000),
    isTyping: function(value) {
      if (!value) {
        console.log("stopped typing")
      }
    }
  },
  methods: {

  }
})

HTML

<div id="app" class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <label class="control-label">Name</label>
      <input type="text" class="form-control" @input="isTyping = true" v-model="form.user.name" placeholder="Type your keyword">
       <label class="control-label">Email</label>
      <input type="text" class="form-control" @input="isTyping = true" v-model="form.user.email" placeholder="Type your Email">
    </div>
  </div>

</div>

Answer

You need to make your watcher deep

   form: {
      handler: _.debounce(function() {
        this.isTyping = false;
      }, 1000),
      deep: true
    },

Updated fiddle

Advertisement

Answer