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.
JS
JavaScript
x
29
29
1
new Vue({
2
el: "#app",
3
data() {
4
return {
5
form: {
6
user: {
7
name: "Bob",
8
email: "Test@test.com"
9
}
10
},
11
isTyping: false,
12
isLoading: false,
13
}
14
},
15
watch: {
16
form: _.debounce(function() {
17
this.isTyping = false;
18
}, 1000),
19
isTyping: function(value) {
20
if (!value) {
21
console.log("stopped typing")
22
}
23
}
24
},
25
methods: {
26
27
}
28
})
29
HTML
JavaScript
1
12
12
1
<div id="app" class="container-fluid">
2
<div class="row">
3
<div class="col-md-3">
4
<label class="control-label">Name</label>
5
<input type="text" class="form-control" @input="isTyping = true" v-model="form.user.name" placeholder="Type your keyword">
6
<label class="control-label">Email</label>
7
<input type="text" class="form-control" @input="isTyping = true" v-model="form.user.email" placeholder="Type your Email">
8
</div>
9
</div>
10
11
</div>
12
Advertisement
Answer
You need to make your watcher deep
JavaScript
1
7
1
form: {
2
handler: _.debounce(function() {
3
this.isTyping = false;
4
}, 1000),
5
deep: true
6
},
7