JSFiddle - React, Tailwind, and code Playground

by Max Liashuk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.23/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<div id="app">
	Amount of items: {{ showTheseFiltered.length }} <br /><br />
	<input type="text" v-model="searchFilter" placeholder='Search by Part Number ' class="form-control"><br /><br />
	<input type="checkbox" value="red" v-model="colourIncludes">
	<label for="red">Red</label>
  <input type="checkbox" id="orange" value="orange" v-model="colourIncludes">
  <label for="orange">Orange</label>
  <input type="checkbox" id="yellow" value="yellow" v-model="colourIncludes">
  <label for="yellow">Yellow</label>
  <input type="checkbox" id="green" value="green" v-model="colourIncludes">
  <label for="green">Green</label>
  <input type="checkbox" id="blue" value="blue" v-model="colourIncludes">
  <label for="blue">Blue</label>
  <br><br>
	
	<select v-model='type' name="type" id="type">
		<option value="" selected>Type</option>
		<option v-for='item in type_array' value="{{item}}">
			{{item}}
		</option>		
	</select>
	
	<select v-model='maritalStatus' name="maritalStatus" id="maritalStatus">
		<option value="" selected>Marital Status</option>
		<option v-for='item in marital_status_array' value="{{item}}">
			{{item}}
		</option>		
	</select>
	
	<br /><br /><br />
	<div class="showItems">
		<div v-for="item in showTheseFiltered"
		class="item">
			Name: {{item.name}}<br/>
			Marital Status: {{item.marital_status}}<br/>
			Type: {{item.type}}<br/>
			Part: {{item.part}}<br>
			Color: {{ item.colour }}
			<hr>
		</div>
	</div>
	
</div>

JavaScript

new Vue ({

	el: '#app',
	
	computed: {
	
    showTheseFiltered(){
    	return this.showThese.filter(this.handler)
    },
		showThese(){
            const searchFilter = this.searchFilter
			var self = this;
			var search_arr = this.obj.filter(function(ob) {
				return ob.part.indexOf(searchFilter) > -1
			}).filter(function(i) {
        return (!self.type || i.type == self.type) && (!self.maritalStatus || i.marital_status == self.maritalStatus);
      });
			
			return search_arr;
        },
		
		type_array: function(){
			var unique = {};
            var distinct = [];
            for( var i in this.obj ){
                if( typeof(unique[this.obj[i].type]) == "undefined"){
                    distinct.push(this.obj[i].type);
                }
                unique[this.obj[i].type] = 0;
            }
            return distinct.sort(function(a, b){return a-b});
		},
		
		marital_status_array: function(){
			var unique = {};
            var distinct = [];
            for( var i in this.obj ){
                if( typeof(unique[this.obj[i].marital_status]) == "undefined"){
                    distinct.push(this.obj[i].marital_status);
                }
                unique[this.obj[i].marital_status] = 0;
            }
            return distinct.sort(function(a, b){return a-b});
		}
	},
	
	methods: {
		handler: function(item) {
			if (this.colourIncludes.length > 0) {
				  return this.colourIncludes.indexOf(item.colour) !== -1;
			} else {
				  return true;
			}
		  },
	  },
	
	data: {
		searchFilter: '',
		
		filter1: '',
		
		filter2: '',
		
		colourIncludes: [],
		
		obj: [
				{
					"name": "Ira",
					"marital_status": "Married",
					"type": 10,
					"part": "16590317-1154",
					"colour": "green"
				},
				{
					"name": "James",
					"marital_status": "Single",
					"type": 4,
					"part": "16051025-6266",
					"colour": "blue"
				},
				{
					"name": "Patricia",
					"marital_status": "Common-Law",
					"type": 10,
					"part":...