javascript - VueJS , LoDash debounce 监视整个表单

Question

我试图让 LoDash debounce 在用户停止在表单上输入时触发事件。

类似于本指南的内容

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

目前 debounce 永远不会触发。

示例 JS 小提琴

JS

    new Vue({
  el: "#app",
  data() {
    return {
      form: {
        user: {
          name: "Bob",
          email: "[e-mail]"
        }
      },
      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>

标签： javascriptvue.jslodash

Answer 1

你需要让你的观察者deep

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

更新的小提琴