我试图限制VueJS应用程序中的一种方法.起初,我try 了以下方法:

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething () {
            console.log('olas')
        }
    },
    created () {
        _.throttle(this.doSomething,200)
    }
}

doSomething方法并没有被触发:https://jsfiddle.net/z4peade0/

然后,我try 了这个:

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething: _.throttle( () => {
            console.log('olas')
        },200)
    },
    created () {
        this.doSomething()
    }
}

函数G被触发:https://jsfiddle.net/z4peade0/1/

问题是,我无法访问节流方法中的foo属性:

export default {
    data () {
        return {
            foo: 'bar'
        }
    },
    methods: {
        doSomething: _.throttle( () => {
            console.log(this.foo) // undefined
        },200)
    },
    created () {
        this.doSomething()
    }
}

我试着做一些事情,比如:

const self = {
    ...
    methods: {
        doSomething: _.throttle( () => {
            console.log(self.foo) 
        },200)
    },
    ...
}

export default self

没有成功

How could I use lodash throttled method on a VueJS method, and using 100 context?

推荐答案

您使用的是arrow函数,它绑定了错误的上下文(this).你应该使用普通的function:

    doSomething: _.throttle( function () {
        console.log('olas', this.foo);
    },200)

Vue.js相关问答推荐

我如何使用vuejs访问彼此嵌套的json对象

Vue CLI: 如何在一个vtextfield更改时让另一个vtextfield的值也同时更改,但同时又可以覆盖它?

VSelect - Select 不适用于 Vuetify 3 中的自定义项目插槽

Nuxt 2.15.7 的构建错误 - 无法解析 CSS @font-face URL

拖入 vue2-google-map 后如何获取标记位置?

props至少应该定义它们的类型

如何在 vue.js 模板中显示空间而不是 undefined 和 null?

Vue-Router 抽象父路由

如何从 .vue 文件中导出多个对象

使用 vue-test-utils 配置过滤器

Angular 5 中的 功能

VueJS错误编译模板

Vuetify Jest 未知自定义元素

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

Vuetify 数据表不显示数据

错误:找不到模块'@vue/babel-preset-app'

Vuetify 过渡:如何设置过渡速度

Vue Cli 3:定义的输出路径

在 Vuex 模块中进行继承的方法

Vue - 重用方法的最佳方式