[Vuejs]-Problems with data communication between components

by

0👍

You have a computed property paginatedData in your "posts" component that relies a variable this.search:

paginatedData () {
  const start = this.page * 6;
  const end = start + 6;
  return this.posts.filter((post) => {
    return post.title.match(this.search);
  }).slice(start, end);
},

but this.search value is not updated in that component because you moved the search input that populates that value into the header component.

What you need to do now is make sure that the updated search value is passed into your "posts" component so that the paginatedData computed property detects the change and computes the new paginatedData value.

You’re now encountering the need to pass values between components that may not have a parent/child relationship.

In your scenario, I would look at handling this need with some Simple State Management as described in the Vue docs.

Depending on the scale of you app it may be worth implementing Vuex for state management.

Leave a comment