JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="filtered">
<input type="text" v-model="search">
  <div v-for="item in filterItem">
     <h3> {{item.type}} </h3>
    <p> {{item.name}} </p>
  </div>
</div>

JavaScript

const app = new Vue({
		el: '#filtered',
		data: {
			search: '',
			items: [
				{name: 'mike', type:'student'},
				{name: 'beckham', type:'footballer'},
        {name: 'wallcot', type:'footballer'},
        {name: 'cech', type:'footballer'},
				{name: 'jordan', type:'actor'},
        {name: 'tom', type:'actor'},
        {name: 'john', type:'actor'}
			]
		},

		computed:{
			filterItem(){
				return this.items.filter(item => {
					return item.type.toLowerCase().indexOf(this.search.toLowerCase())> -1
				})
			}
		}
	})