Отмена ввода в Vue с переменным временем ожидания - PullRequest
Новая
       38

Отмена ввода в Vue с переменным временем ожидания

1 голос
/ 21 апреля 2020

Я хотел бы отменить поля ввода в Vue, что довольно просто, за исключением того, что я хочу настроить время ожидания отладки для каждого поля, что, очевидно, не так просто.

Мои поля ввода опираясь на объекты, например так: 

filters: [
    {
    title: 'Foo',
    value: null,
    debounce: 1200
  },
    {
    title: 'Bar',
    value: null,
    debounce: 400
  }
]

Затем я создаю поля ввода, используя следующие объекты: 

  <div v-for="filter in filters">
    <input type="text" @input="debounceInput($event, filter)" :value="filter.value">
    <span>{{ filter.value }}</span>
  </div>

Я использую метод Loda sh debounce, подобный этому , который отлично работает: 

  methods: {
    debounceInput: _.debounce((event, filter) => {
        filter.value = event.target.value;
    }, 500)
  }

Но я бы очень хотел, чтобы время ожидания debounce настраивалось. Он хранится в filter, но поскольку фильтр передается в _.debounce в качестве параметра, я не могу получить к нему доступ за пределами _.debounce, что на самом деле мне и нужно.

Я пробовал обернуть анонимную функцию вокруг вызова debounce (что казалось мне наиболее очевидным решением), например: 

debounceInputVariable(event, filter) {
    return _.debounce((event, filter) => {
      filter.value = event.target.value;
    }, filter.debounce)
}

Но это не работает. Я также экспериментировал с bind и call безрезультатно.

JSFiddle: https://jsfiddle.net/thebluenile/ma6nvqzh/

Возможно ли это вообще?

1 Ответ

1 голос
/ 21 апреля 2020

Создайте метод для генерации функций debounce для каждого фильтра: 

generateDebouncers() {
  this.filters.forEach(filter => {
    Vue.set(filter, 'debouncer', _.debounce(function(event) {
      filter.value = event.target.value;
    }, filter.debounce));
  });
}

Это создает свойство debouncer для каждого фильтра, функцию, которая будет вызываться в шаблоне, например: 

<input type="text" @input="filter.debouncer" :value="filter.value">

Вы можете инициализировать это в created или вызвать его в глубоком наблюдении на filters, если вам нужно, чтобы оно реагировало на изменения длительности фильтра.

Вот демо

...