VueJS Search input with debounce

index.html

<h1 class="text-center">VueJS Search Input with Debounce</h1>
<p class="lead text-muted text-center">Using lodash _.debounce with a 1s delay</p>

<div id="app">
  <my-list/>
</div>

script.babel

const myList = Vue.component('MyComponent', {
  name: 'myList',
  template: `
    <div>
      <input 
        types="text" 
        class="form-control"
        placeholder="Type here"
        v-model="searchTerms"/>

      <br/>
      <ul class="list-group">
        <li v-for="todo in filteredTodos" class="list-group-item">
          {{ todo.title }}
        </li>
      </ul>
    </div>
  `,
  data () {
    return {
      searchTerms: '',
      todos: [
        { title: 'delectus aut autem' },
        { title: 'quis ut nam facilis et officia qui' },
        { title: 'fugiat veniam minus' },
        { title: 'et porro tempora' },
        { title: 'laboriosam mollitia et enim quasi adipisci quia provident illum' }
      ],
      filteredTodos: []
    }
  },
  watch: {
    searchTerms (value) {
      this.filterTodos(value)
    }
  },
  methods: {
    filterTodos: _.debounce(function (terms) {
      this.filteredTodos = this.todos
        .filter(item => {
          const title = item.title.toLowerCase()
          return terms ? title.includes(terms.toLowerCase()) : true
        })
    }, 1000)
  },
  created () {
    this.filteredTodos = this.todos
  }
})

new Vue({
  el: '#app',
  components: {
    myList
  }
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

style.scss

body{
  padding: 3rem;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />

vuejs-search-input-with-debounce.markdown

VueJS Search input with debounce

A Pen by Sébastien Lombard on CodePen.

License.