javascript - VueJS、LoDash 反跳监视整个表单

Question

我正在尝试让 LoDash debounce 工作，以便在用户停止在表单上打字时触发事件。

类似于this guide的东西

除非我想将其应用于整个表单/模型属性。

目前，反跳从未触发。

Example JS Fiddle

JS

    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 1

你需要让你的观察者 deep

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

Updated fiddle