Vue.js integration?

[eliteproxy7]

is there a way to integrate this to an existing vue component?

[jeancroy]

Hi, its a good question since a lot o my example are from jquery era! Maybe we can work on a best practice example.

So far I have this

<div id="example">
  <input v-model="searchTerm">
  <ul>
    <li v-for="item in results">
      {{item}}
    </li>
  </ul>
</div>

<script>
var exampleVM = new Vue({

  el: '#example',

  data: {
    searchTerm: '',
    results: []
  },

  watch: {

    searchTerm: function (newTerm, oldTerm) {
      // This will perform the search on each keystroke.
      // If large list apply something like debounce.
      this.results = this.searcher.search(newTerm)
    }

  },

  created: function () {
    // Init the fuzzy search object.
    datasource = [] // Fill this with real data somehow...
    this.searcher =  new FuzzySearch({source:datasource});
  },

})

</script>

Inspired by https://vuejs.org/v2/guide/computed.html#Watchers

[eliteproxy7]

thank you so much!, how would I import the FuzzySearch library to my component via my package.json?

[jeancroy]

It's available on npm as fz-search

[jeancroy]

I'll close this issue, feel free to ask more questions.