How to handle search with $emit value?

[sajjadalis]

I have search input field in header component. I'm getting emitted value but it's doesn't filter content. How do i pass $fetch with $emit from header component or what is the right way?

Index.vue

import Header from '@/components/layout/header';
export default {
  components: {
    Header
  },
  data() {
    return {
      posts: [],
      q: ''
    }
  },
  async fetch() {
    this.posts = await this.$content('posts')
    .search(this.q)
    .fetch()
  }
}

Header.vue

<template>
<div>
<input type="search" placeholder="Type your search" v-model="q" @input="$emit('q', $event)">
</div>
</template>
<script>
export default {
  props: [ 'q' ]
}
</script>

[atinux]

@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" />

[sajjadalis]

@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" />

[atinux]

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

[sajjadalis]

@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()
  }
}

[atinux]

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