mercredi 22 septembre 2021

Search bar vue.js

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. Please help. Thanks.

Here is my code
      <div class="search-wrapper panel-heading col-sm-12">
            <input type="text" v-model="search" placeholder="Search" /> <br> <br>
        </div>  
        <table class="table" id="myTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Category</th>
                <th>Quantity</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="product in products" :key="product.id">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
 
<script>
    export default {
        data() {
            return {
                products: []
            }
        }

}




Aucun commentaire:

Enregistrer un commentaire