[Vuejs]-Search bar filter using Vue js

by

0👍

✅

You can use your data as computed where you pass it as a prop.

 <BaseTable :data='data' />

Here instead of using like this create a computed which can be filteredData.

<BaseTable :data='filteredData' />

and in your props you can simply filter it or just send the data as it is.


computed: {
     filteredData() {
          if(this.search) {
               // filter your data as you want and return
            }
           else // return your main data
      }
}

Here is a working simple example:

https://codesandbox.io/s/filterlist-example-vdwhg?file=/src/App.vue

And change your include to includes.

0👍

what error you are getting ? I think you are using this.search inside filteredRows function which is not a vue instance property. it should be this.data.search. The search is used with V-model as well so you should declare it outside data (JSON object).

Leave a comment