JSFiddle - React, Tailwind, and code Playground

by Jesse M

HTML

<script src="https://unpkg.com/vue"></script>
<div id="main">
Filter: <input type="text" v-model="search"/>   
<div v-for="customer in filteredCustomers">
 <span><img style="max-width:60px" :src="customer.profile_pic" class="profile-pic" /></span>
 <span>{{customer.name}}</span>
</div>
</div>

JavaScript

var app=new Vue({
el: "#main",
data: function(){
        return {
        search: '',
        customers: [
          { id: '1', name: 'Jon Snow', profile_pic: 'https://i.stack.imgur.com/CE5lz.png'},
          { id: '2', name: 'Deanerys Targarian', profile_pic: 'https://i.stack.imgur.com/CE5lz.png'},
          { id: '3', name: 'Jaime Lanister', profile_pic: 'https://i.stack.imgur.com/CE5lz.png'},
          { id: '4', name: 'Tyron Lanister', profile_pic: 'https://i.stack.imgur.com/CE5lz.png'}
        ]};
},
computed:
{
    filteredCustomers:function()
    {
    	 var self=this;
       return this.customers.filter(function(cust){return cust.name.toLowerCase().indexOf(self.search.toLowerCase())>=0;});
       //return this.customers;
    }
}
});