VueJS , LoDash debounce 监视整个表单答案

【问题标题】：VueJS , LoDash debounce watch on entire formVueJS , LoDash debounce 监视整个表单
【发布时间】：2019-06-25 04:31:16
【问题描述】：

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

类似于this guide的东西

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

目前 debounce 从未触发。

Example JS Fiddle

    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>

【问题讨论】：

你不需要在 watch 中使用 debounce，只要把它放在方法中，它就会为你工作

标签： javascript vue.js lodash

【解决方案1】：

你需要让你的观察者deep

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

Updated fiddle

【讨论】：