[Vuejs]-Vuex create search filter

0๐Ÿ‘

I would emit event from ItemToolbar.vue to Items.vue, that then will decide which items it have to show: if title is present โ€“ filtered, if not โ€“ all items.

<template>
<div>
   <ItemToolbar @filter="title = $event"></ItemToolbar>
   <ItemList :all-items="filteredItems"></ItemList>
</div>
</template>

...
data() {
  return {
    title: '',
  }
},
computed: {
  ...mapGetters(['allItems', 'searchByTitle']),
  filteredItems() {
    return this.title ? this.searchByTitle(title) : allItems
  },
},
...

And emit that title from ItemToolbar.vue:

this.$emit('filter', VALUE_OF_THE_TITLE')

Leave a comment