I'm currently experimenting with implementing LoDash debounce to detect when a user stops typing on a form and trigger an event accordingly.
Looking for inspiration from this helpful guide
However, my goal is to extend this functionality to cover all form/model properties.
Unfortunately, the debounce function does not seem to be activating as intended at the moment.
Check out this example JS Fiddle for reference
JS
new Vue({
el: "#app",
data() {
return {
form: {
user: {
name: "Bob",
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c195a4b2b581b5a4b2b5efa2aeac">[email protected]</a>"
}
},
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>