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

Question

嘿这里的所有人，

我对 Vue.js 还很陌生，但我想我已经开始接触它了。但是，我的单文件组件与 lodashs throttle() 函数结合使用时存在问题。这是我的组件到目前为止的样子：

<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

标签： javascriptvue.jslodash

Answer 1

该data对象被实例化，其属性被放入this after methods，您当时 不能使用。this.throttle

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

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