How to handle search with $emit value? about content HOT 5 CLOSED

Then you need to add a method onSearch to update q and call fetch() again

from content.

@sajjadalis your Header us emitting q event, then you can listen in you index.vue and call $fetch, see more on https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

<Header ... @q="$fetch" />

from content.

@atinux Thanks for reply.

I tried this but its not working.

With only @q="$fetch", input field does not accept text, when i try to type it goes blank.
<Header :q="q" @q="$fetch" />

If i use @q="q = $event.target.value, $fetch" then input and v-model works fine but doesn't filter content.

<Header :q="q" @q="q = $event.target.value, $fetch" />

from content.

@atinux Thanks for the help.

Is this the correct way to call onSearch method? It's working and filtering content, but i'm not sure if its require to call the whole await this.$content again.

methods: {
    async onSearch($event) {
      this.q = $event.target.value;

      this.posts = await this.$content('posts')
      .search(this.q)
      .fetch()
  }
}

from content.

I think that you can call this.$fetch() instead of this.$content('posts')..

from content.