Pass Vue js search filter functionality through single file components with EventBus

Question

I have the following components:

/components/SearchBlogs.vue Search component to filter on blog.title and blog.description.

Answer 1

Couple of issues but essentially the computed prop filteredData will look like:

computed: {
    filteredData() {
      return this.experiences.filter(
        el => el.category.indexOf(this.search) > -1
      );
    }
}

Also, used quotes around 'this.search' when passing its value back which made it a string.

Fixed sandbox

https://codesandbox.io/s/reverent-lamarr-is8jz

Answer 2

Look at my solution condesandbox

Here is an explanation: You don't need to use EventBus. You can communicate with Search Component by v-model, using prop value and emiting updated value from the Input.

Then your Main (List) Component is responsible for all the logic.

1. It keeps the state of a Search
2. It keeps the items and filtered Items

Thanks to that your Search Component is very clear and has no data, that means it has very little responsibility.

Please ask questions if I can add something to help you understand