I can't seem to debounce (lodash) computed properties or vuex getters. The debounced functions always return undefined.
https://jsfiddle.net/guanzo/yqk0jp1j/2/
HTML:
<div id="app">
<input v-model="text">
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ textDebounced }} </div>
</div>
JS:
new Vue({
el:'#app',
data:{
text:''
},
computed:{
textDebounced: _.debounce(function(){
return this.text
},500),
textComputed(){
return this.text
}
}
})
Getters and setters in Swift are the methods a computed property uses to either set or get a value on-demand. A stored property stores a value for later use (for example, a variable that belongs to a class instance). A computed property does not store a value. Instead, it computes it only when requested.
Vuex getters behave a lot like Mongoose getters: they're special properties that are computed from other properties when you access them. For example, suppose your store contains a user's firstName and lastName . You can write a getter that returns the user's fullName .
In Vue. js, computed properties enable you to create a property that can be used to modify, manipulate, and display data within your components in a readable and efficient manner. You can use computed properties to calculate and display values based on a value or set of values in the data model.
You need to implement a setter for each computed property that you want to mutate, because in Vuejs, computed properties are getter-only by default: VueJS docs: Computed properties are by default getter-only, but you can also provide a setter when you need it.
As I mention in my comment, debouncing is an inherently asynchronous operation, and so cannot return a value. Depending on your needs, you might want to debounce on the input side. There will be no difference between the value in text
and that in textComputed
, but if you v-model="textComputed"
, the value setting will be debounced.
If you specifically want a debounced version of a variable, mrogers has given a good solution.
var x = new Vue({
el: '#app',
data: {
text: 'start'
},
computed: {
textComputed: {
get() {
return this.text;
},
set: _.debounce(function(newValue) {
this.text = newValue;
}, 500)
}
}
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<div id="app">
<div>
Debounced input:
<input v-model="textComputed">
</div>
<div>
Immediate input:
<input v-model="text">
</div>
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ text }} </div>
</div>
I don't have any insight as to why the debounce function doesn't work on a computed property. However, an alternative solution is to put the debounce on a function in the methods
section and call it via a watch
.
https://jsfiddle.net/vsc4npv3/
HTML:
<div id="app">
<input v-model="text">
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ debouncedText }} </div>
</div>
JavaScript:
var x = new Vue({
el:'#app',
data:{
text:'',
debouncedText: ''
},
watch: {
text: function (val) {
this.debouncer();
}
},
computed:{
textComputed(){
return this.text;
}
},
methods: {
debouncer: _.debounce(function(){
this.debouncedText = this.text;
},500)
}
})
_.debounce
)import Vue from 'vue'
// Thanks to https://github.com/vuejs-tips/v-debounce/blob/master/debounce.js
function debounce(fn, delay) {
var timeoutID = null
return function () {
clearTimeout(timeoutID)
var args = arguments
var that = this
timeoutID = setTimeout(function () {
fn.apply(that, args)
}, delay)
}
}
function debouncedProperty(delay) {
let observable = Vue.observable({ value: undefined });
return {
get() { return observable.value; },
set: debounce(function (newValue) { observable.value = newValue; }, delay)
}
}
// component
export default {
computed: {
myProperty: debouncedProperty(300),
},
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With