vuejs .vue компонент дребезга получая себя в качестве входных данных

Question

Прежде чем я начал использовать .vue компоненты я написал компонент, который имел следующий код работает successufuly

import { debounce } from '../utils/debounce'; 
Vue.component('play-list-manager', { 
    ... 
    methods: { 
    renamePlayList: debounce((oldName, event) => { 
     store.dispatch(Actions.renamePlayList(oldName, event.target.value)); 
     }, 500), 
    }, 
    template: `<input 
      type="text" 
      v-bind:value="tag.name" 
      v-on:keyup="renamePlayList(tag.name, $event)" 
      placeholder="... playlist name">` 
}); 

но когда я перешел на .vue компонентов он больше не работает

Проблема в том, что ввод debounce не ('some name', Event), но теперь (function(oldName, event), 500). Таким образом, он вводит ввод debounce в качестве входных данных.

Каков правильный способ добавления функции debounce.

Просто для завершения здесь, моя функция дребезга

export function debounce(func, wait) { 
    // we need to save these in the closure 
    let timeout; 
    let args; 
    let context; 
    let timestamp; 

    return() => { 
     // save details of latest call 
     context = this; 
     args = [].slice.call(arguments, 0); 
     timestamp = new Date(); 

     // this is where the magic happens 
     const later =() => { 
      // how long ago was the last call 
      const last = (new Date()) - timestamp; 

      // if the latest call was less that the wait period ago 
      // then we reset the timeout to wait for the difference 
      if (last < wait) { 
       timeout = setTimeout(later, wait - last); 

       // or if not we can null out the timer and run the latest 
      } else { 
       timeout = null; 
       func.apply(context, args); 
      } 
     }; 

     // we only need to set the timer now if one isn't already running 
     if (!timeout) { 
      timeout = setTimeout(later, wait); 
     } 
    }; 
} 

Answer 1

Я нашел решение, хотя я не понимаю полностью

export function debounce(func, wait) { 
    // we need to save these in the closure 
    let timeout; 
    let args; 
    let context; 
    let timestamp; 

    return function() { 
     // save details of latest call 
     context = this; 
     args = [].slice.call(arguments, 0); 
     timestamp = new Date(); 

     // this is where the magic happens 
     const later =() => { 
      // how long ago was the last call 
      const last = (new Date()) - timestamp; 

      // if the latest call was less that the wait period ago 
      // then we reset the timeout to wait for the difference 
      if (last < wait) { 
       timeout = setTimeout(later, wait - last); 

       // or if not we can null out the timer and run the latest 
      } else { 
       timeout = null; 
       func.apply(context, args); 
      } 
     }; 

     // we only need to set the timer now if one isn't already running 
     if (!timeout) { 
      timeout = setTimeout(later, wait); 
     } 
    }; 
}