Vue反跳滑块事件

问题描述

我使用Vuetify。在自定义组件中，我有一个v-slider，它发出一个输入事件，然后该事件在API上调用patch方法。

问题是它在“滑动”时发送大量请求。我想将输入的时间延迟一秒钟。

内部组件：

<v-slider :value="uta.requirements_completed_perc"
                    @input="$emit('patch-uta',[uta.id,'requirements_completed_perc',$event])"
                    max="100"
                    min="0"
          ></v-slider>

赶上活动：

@patch-uta="patchUTA(...$event)"

修补方法：

methods:{
        patchUTA(_id,field,val) {
            let self = this;
            var payload = {}
            payload[field] = val ? val : false;
            dx.patchUTA(payload,_id).then(resp => {
                self.showSuccessNotification();
            })
        },... }

如何使用underscore _.debounce方法谴责它？或者我可以谴责事件发射吗？

解决方法

您可以尝试这样

methods: {
  patchUTA: _.debounce((_id,field,val) => {
            const payload = {}
            payload[field] = val ? val : false;
            dx.patchUTA(payload,_id).then(resp => {
                this.showSuccessNotification();
            })
        },500) // delay = 500
}