title: full text search by filter in VueJs
body: <p>I tried to create simple text search, but I couldn't execute it. first I got all user data whom provide services and store it inside searchable array, then I tried to to filter it based on user entry.
  here you can see my code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;text-h4 text-grey-9&quot;&gt;
      &lt;q-input
        outlined
        filled
        type=&quot;text&quot;
        v-model=&quot;searchResult&quot;
        color=&quot;amber-10&quot;
        placeholder=&quot;search for service providers&quot;
      /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { ref } from &quot;vue&quot;;
  import { db } from &quot;src/boot/firebase&quot;;
  import { collection, query, where, getDocs } from &quot;firebase/firestore&quot;;
  
  export default {
    setup() {
      return {
        searchableDate: ref([]),
        searchResult: '',
      };
    },
    async created() {
      const q = query(
        collection(db, &quot;userProfile&quot;),
        where(&quot;provider&quot;, &quot;==&quot;, true)
      );
      const serviceProviderSnapshot = await getDocs(q);
      serviceProviderSnapshot.forEach(doc =&gt; {
        let docData = doc.data();
        this.searchableDate.unshift(docData);
      });
      console.log(typeof(this.searchableDate))
    },
  
    computed:{
      searchServiceProvider(){
        let searchResult = []
        if(this.searchResult !== 0){
          searchResult = this.searchableDate.filter(p =&gt;
          p.fullName.toLowerCase().includes(this.searchResult.toLowerCase()) ||
          p.skillCatgs.toLowerCase().includes(this.searchResult.toLowerCase()))
        } else {
          searchResult = this.searchableDate
        }
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  <p>here is the searchableData format:<code>{0: {…}, 1: {…}, 2: {…}, 3: {…}}</code></p>