title: Search bar vue.js
body: <p>I want to include search bar in vue.js. I am quite new to vue. I need to filter data on the front end.  How do I filter the data when I get it in the script section.</p>
  <p>Here is my code:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class=&quot;search-wrapper panel-heading col-sm-12&quot;&gt;
        &lt;input type=&quot;text&quot; v-model=&quot;search&quot; placeholder=&quot;Search&quot; /&gt; &lt;br /&gt;
        &lt;br /&gt;
      &lt;/div&gt;
      &lt;table class=&quot;table&quot; id=&quot;myTable&quot;&gt;
        &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Category&lt;/th&gt;
            &lt;th&gt;Quantity&lt;/th&gt;
            &lt;th&gt;Status&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr v-for=&quot;product in products&quot; :key=&quot;product.id&quot;&gt;
            &lt;td&gt;{{ product.id }}&lt;/td&gt;
            &lt;td&gt;{{ product.name }}&lt;/td&gt;
            &lt;td&gt;{{ product.category }}&lt;/td&gt;
            &lt;td&gt;{{ product.quantity }}&lt;/td&gt;
            &lt;td&gt;{{ product.status }}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        products: []
      };
    }
  };
  &lt;/script&gt;
  </code></pre>