title: Search bar from API Vue js
body: <p>I have a table which get the data from Api and i am trying to have a search bar for this table when  search for any name it should retrn just what i write</p>
  <p>here is my app component :</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class=&quot;flex justify-center&quot;&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;search&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;user flex justify-center text-3xl&quot;&gt;
        &lt;BaseTable :data=&quot;filteredData&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import BaseTable from &quot;./components/BaseTable&quot;;
  export default {
    data() {
      return {
        data: {
          headers: [&quot;id&quot;, &quot;city&quot;, &quot;name&quot;, &quot;address&quot;],
          rows: [],
        },
        search: null,
      };
    },
    created() {
      this.fetchUsers();
    },
    components: {
      BaseTable,
    },
    methods: {
      fetchUsers() {
        this.$axios
          .get(&quot;https://605c40b36d85de00170d9a8f.mockapi.io/user/zurich&quot;)
          .then(({ data }) =&gt; {
            this.mapper(data);
            console.log(data);
          })
          .catch((error) =&gt; {
            console.log(error);
          });
      },
      mapper(data) {
        this.data.rows = data.map((i) =&gt; {
          return [i.id, i.city, i.name, i.address];
        });
        console.log(this.data);
      },
    },
    computed: {
      filteredData() {
        if (this.search) {
          return this.data.rows.filter((item) =&gt;
            item.toLowerCase().includes(this.search)
          );
        } else {
          return this.data;
        }
      },
    },
  };
  &lt;/script&gt;
  
  &lt;style src=&quot;../assets/tailwind.css&quot;/&gt;
  </code></pre>
  <p>and here is my table component :</p>
  <pre><code>&lt;template&gt;
    &lt;table class=&quot;mt-12 border-2 border-gray-600&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th
            v-for=&quot;header in data.headers&quot;
            :key=&quot;header&quot;
            class=&quot;text-left border-l-2 border-gray-600 border-b-2 border-gray-600 bg-red-400&quot;
          &gt;
            {{ header }}
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for=&quot;(rows, index) in data.rows&quot; :key=&quot;index&quot;&gt;
          &lt;td v-for=&quot;row in rows&quot; :key=&quot;row&quot; class=&quot;border-l-2 border-gray-600&quot;&gt;
            {{ row }}
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    props: {
      data: Object,
      default: {},
    },
  };
  &lt;/script&gt;
  &lt;style src=&quot;../assets/tailwind.css&quot;/&gt;
  </code></pre>
  <p>that what i tried but it doesnt work it dosent give any error or results ?</p>
  <p>any help i am new on Vue js
  you can take a look on the code in this sandbox :
  <a href="https://codesandbox.io/s/boring-brown-qs9pl?file=/src/App.vue:0-1281" rel="nofollow noreferrer">https://codesandbox.io/s/boring-brown-qs9pl?file=/src/App.vue:0-1281</a></p>