To prevent your Vue Js methods and events from mass spamming / calling too often, you can make use of Lodash's "debounce()" function.
Below is how you can define the "debounce()" function within your method function body. For this code example, the debounce will execute the function to perform the ajax every 500ms after the input has changed.
Vue Js debounce Code Example
Below is how you can define the "debounce()" function within your method function body. For this code example, the debounce will execute the function to perform the ajax every 500ms after the input has changed.
<template>
<input
type="search"
v-on:input="filter"
placeholder="Search..."
>
</template>
<script>
import { debounce } from 'lodash';
export default {
methods: {
filter: debounce(function () {
// your search ajax here
}, 500)
}
}
</script>
Leave a reply