Skip to content

Instantly share code, notes, and snippets.

@sagalbot
Created May 22, 2019 18:04
Show Gist options
  • Save sagalbot/0799b9e0b9fdff3b340a4e44da57c8a4 to your computer and use it in GitHub Desktop.
Save sagalbot/0799b9e0b9fdff3b340a4e44da57c8a4 to your computer and use it in GitHub Desktop.
Using Fuse.js to filter items in Vue Select
<template>
<v-select :filter="fuseSearch" :options="books" :getOptionLabel="option => option.title">
<template #option="{author, title}">
{{ title }} <br>
<cite>{{ author.firstName }} {{ author.lastName }}</cite>
</template>
</v-select>
</template>
<script>
import Fuse from 'fuse.js';
import books from '../data/books';
export default {
computed: {
books: () => books,
},
methods: {
fuseSearch (options, search) {
const fuse = new Fuse(options, {
keys: ['title', 'author.firstName', 'author.lastName'],
shouldSort: true,
});
return search.length ? fuse.search(search) : fuse.list;
},
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment