debounce search box

package.json

@@ -25,6 +25,7 @@
     "sass-loader": "^8.0.0",
     "utf8": "^3.0.0",
     "vue": "^2.6.10",
+    "vue-debounce": "^2.2.0",
     "vue-router": "^3.1.3",
     "vuex": "^3.1.2",
     "vuex-router-sync": "^5.0.0"

src/components/Navbar.vue

@@ -31,7 +31,14 @@
         </button>
 
         <form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline">
-            <input class="form-control w-100" type="search" placeholder="Search" aria-label="Search" @input="searchEventItems($event.target.value)">
+            <input
+              class="form-control w-100"
+              type="search"
+              placeholder="Search"
+              aria-label="Search"
+              v-debounce:500ms="myFunc"
+              @input="searchEventItems($event.target.value)"
+            >
         </form>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">

src/main.js

@@ -14,6 +14,8 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
+import vueDebounce from 'vue-debounce';
+
 library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList, faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
@@ -26,3 +28,5 @@ new Vue({
   router,
   render: h => h(App),
 });
+
+Vue.use(vueDebounce);

yarn.lock

@@ -8353,6 +8353,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-debounce@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/vue-debounce/-/vue-debounce-2.2.0.tgz#b081aba94a7faf99145312e86fc1b2b1117990de"
+  integrity sha512-H9Z6gp7zsgLMgtYtQKZ1htxw/QC1NLYkzu3ElB+2RECEMLtejRM1+hGrFgBPVdnBamGA/R9uSt+lYdtx+GSnhQ==
+
 vue-eslint-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-5.0.0.tgz#00f4e4da94ec974b821a26ff0ed0f7a78402b8a1"