javascript - 在 vue.js SFC 中使用 lodash.throttle 超时的数据值

Question

大家好，

我对 Vue.js 相当陌生，但我想我已经开始接触它了。但是，我的单文件组件与 lodashsthrottle() 函数结合使用时遇到问题。这是我的组件到目前为止的样子:

<template>
    <fieldset class="fieldset-shorttext">
        <label v-bind:for="itemId"
               v-text="label"></label>
        <input v-bind:name="itemId"
               v-bind:id="itemId"
               v-model="input"
               type="text" />
    </fieldset>
</template>

<script>
    import _ from 'lodash'

    export default {
        data() {
            return {
                itemId: '123450',
                label: 'Test Label',
                input: 'Test value',
                throttled: 200
            };
        },
        watch: {
            input: function (value) {
                this.throttledValuePush(value)
            }
        },
        methods: {
            throttledValuePush: _.throttle(function(value) {
                console.log(value);
            }, this.throttled)
        }
    };
</script>

<style>
    .fieldset-shorttext {
        border:0;
    }
</style>

当我在浏览器中运行此程序时，出现错误:this.throttled(用作我的throttle() 函数的超时参数)未定义。当我使用固定值(例如 200)时，它会起作用。但我无法通过使用“throttled”数据变量的值来运行它。

有人可以帮助我吗？预先非常感谢您。

编辑:我在此处添加了一个沙箱示例: https://codesandbox.io/s/434490z5v9

Answer 1

data 对象被实例化，并将其属性放入this 之后 方法，您不能当时使用this.throttle。

相反，您可以在 mounted 生命周期 Hook 中使用 this.throttl

methods: {
    throttledValuePush: undefined,
},
mounted() {
    this.throttledValuePush = _.throttle((value) => console.log(value), this.throttled);
}