在Vue中取消反弹计算属性/getter
在Vue中取消反弹计算属性/getter
提问于 2017-06-27 13:09:32
我似乎不能去掉(lodash)计算属性或vuex getter。去抖动的函数总是返回未定义的。
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
}
}
})回答 3
Stack Overflow用户
回答已采纳
发布于 2017-06-27 20:55:32
正如我在评论中提到的，去抖动本质上是一个异步操作，因此不能返回值。根据您的需要，您可能希望在输入端去反弹。text中的值与textComputed中的值没有区别，但如果您使用v-model="textComputed"，则value设置将被取消。
如果你特别想要一个变量的去声明版本，mrogers给出了一个很好的解决方案。
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>
Stack Overflow用户
发布于 2017-06-27 13:23:58
我不明白为什么去反跳函数在计算属性上不起作用。但是，另一种解决方案是将去抖动放在methods部分中的函数上，并通过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)
}
})Stack Overflow用户
发布于 2019-08-10 16:52:41
- Simple
- No外部依赖项(如Vue
的_.debounce)
- Tailored
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),
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44772629
复制相关文章
相似问题
腾讯云开发者
