onload = main; function main() { var vue = new Vue({ el: "#app", data: { cars: [], test: 'tst', sortby: 'name' }, template: `

Sort by:

`, computed: { sortedCars: function() { if(this.sortby === 'name') { return this.cars.sort((a,b)=>{ nameA = a.name.toLowerCase(); nameB = b.name.toLowerCase(); if(nameA < nameB) return -1; if(nameA > nameB) return 1; return 0; }); } else if(this.sortby === 'availability') { return this.cars.sort((a,b)=>{ var sortOrder = {'In Dealership': 1, 'Out of Stock': 2, 'Not Available': 3}; return sortOrder[a.availability] - sortOrder[b.availability]; }); } else if(this.sortby === 'price_asc') { return this.cars.sort((a,b)=>{ return a.price - b.price; }); } else if(this.sortby === 'price_desc') { return this.cars.sort((a,b)=>{ return b.price - a.price; }); } else return this.cars; }, }, methods: { setSortBy: function(elm) { console.log('item: ' + elm.target.value) this.sortby = elm.target.value; }, priceDollar: function(price) { return '$' + price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }, getApi(endpoint) { this.$http.get(endpoint).then(response => { this.cars = response.body; }, response => { console.log('Error on network!') }); } }, created() { this.getApi('https://cv-json-server1.herokuapp.com/data'); } }); }

Cars for sale with api data (vue2)