<h1>Municipalities in Wiscosin</h1>

<div id="app">
<select v-model="queryBy">
	<option value="municipality">Municipality</option>
	<option value="county">County</option>
</select>
<input type="text" placeholder="Filter Results" v-model="query">
	
<table>
	<thead>
    <tr>
      <th @click="setOrder('municipality');">
				Municipalities
				<span v-if="orderBy == 'municipality'">
					<i v-if="order == 'asc'" class="fa fa-sort-numeric-down"></i>
					<i v-if="order == 'desc'" class="fa fa-sort-numeric-up"></i>
				</span>
			</th>
      <th @click="setOrder('population');">
				2010 Population
				<span v-if="orderBy == 'population'">
					<i v-if="order == 'asc'" class="fa fa-sort-numeric-down"></i>
					<i v-if="order == 'desc'" class="fa fa-sort-numeric-up"></i>
				</span>
			</th>
      <th @click="setOrder('county');">
				County
				<span v-if="orderBy == 'county'">
					<i v-if="order == 'asc'" class="fa fa-sort-numeric-down"></i>
					<i v-if="order == 'desc'" class="fa fa-sort-numeric-up"></i>
				</span>
			</th>
    </tr>
  </thead>
	<tbody>
    <tr v-for="city in queriedResults">
      <td>{{ city.municipality }}</td>
      <td>{{ city.population }}</td>
      <td>{{ city.county }}</td>
    </tr>
	</tbody>
</table>
	
</div>
tbody tr:nth-child(odd) {
  background-color: #AAC4FF;
}
var app = new Vue({
  el: '#app',
  data: {
    cities: [
      { municipality: 'Milwaukee', population: 594833, county: 'Milwaukee' },
      { municipality: 'Madison', population: 233209, county: 'Dane' },
      { municipality: 'Green Bay', population: 104057, county: 'Brown' },
      { municipality: 'Kenosha', population: 99218, county: 'Kenosha' },
      { municipality: 'Racine', population: 78860, county: 'Racine' },
      { municipality: 'Appleton', population: 72623, county: 'Outagamie' },
      { municipality: 'Waukesha', population: 70718, county: 'Waukesha' },
      { municipality: 'Oshkosh', population: 66083, county: 'Winnebago' },
      { municipality: 'Eau Claire', population: 65883, county: 'Eau Claire' },
      { municipality: 'Janesville', population: 63575, county: 'Rock' }
    ],
		order:'asc',
		orderBy:'municipality',
		query:'',
		queryBy:''
  },
	methods: {
		setOrder: function(type){
			if(type == this.orderBy){
				if(this.order == 'desc')
					this.order = 'asc';
				else
					this.order = 'desc';
			}else{
				this.order = 'asc';
				this.orderBy = type;
			}
		}
	},
	computed: {
		sortedArray: function() {
			// Temporary hold for 'this'
			var globalScope = this;

			function compare(a, b) {
				if(globalScope.order == 'asc'){
					if(globalScope.orderBy == 'municipality'){
						if (a.municipality < b.municipality)
							return -1;
						if (a.municipality > b.municipality)
							return 1;
						return 0;
					}
				}else{
					if(globalScope.orderBy == 'municipality'){
						if (a.municipality < b.municipality)
							return 1;
						if (a.municipality > b.municipality)
							return -1;
						return 0;
					}
				}
				
				if(globalScope.order == 'asc'){
					if(globalScope.orderBy == 'population'){
						if (a.population < b.population)
							return -1;
						if (a.population > b.population)
							return 1;
						return 0;
					}
				}else{
					if(globalScope.orderBy == 'population'){
						if (a.population < b.population)
							return 1;
						if (a.population > b.population)
							return -1;
						return 0;
					}
				}
				
				if(globalScope.order == 'asc'){
					if(globalScope.orderBy == 'county'){
						if (a.county < b.county)
							return -1;
						if (a.county > b.county)
							return 1;
						return 0;
					}
				}else{
					if(globalScope.orderBy == 'county'){
						if (a.county < b.county)
							return 1;
						if (a.county > b.county)
							return -1;
						return 0;
					}
				}
				
			}
			
			return this.cities.sort(compare);
		},
		queriedResults: function () {
			var self=this;
			if(this.query == ''){
				return this.sortedArray;
			}
			else if(this.queryBy == 'municipality'){
				return this.sortedArray.filter(function(cust){return cust.municipality.toLowerCase().indexOf(self.query.toLowerCase())>=0;});
			}
			else if(this.queryBy == 'county'){
				return this.sortedArray.filter(function(cust){return cust.county.toLowerCase().indexOf(self.query.toLowerCase())>=0;});
			}
		}
	}
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js