vuejs-sort v1.0.6

VueJS Sort :zap:

• A simple Vue.js sorting wrapper.

• This is on GitHub so let me know if I've b0rked it somewhere, give me a star :star: if you like it :beers:

Requirements

• Vue.js 2.x

:white_check_mark: Install :ok_hand:

npm install vuejs-sort
// or
yarn add vuejs-sort

:white_check_mark: Usage :mortar_board:

Register the component globally:

Vue.component('sort', require('vuejs-sort'));

Or use locally

import sort from 'vuejs-sort';

:white_check_mark: Example :four_leaf_clover:

<sort label="Posts (asc)" icon="chevron" :toRoute="{ name: 'somewhere.index', query: { sort : 1, sorttype: 'asc' }}" @sort-data="sortData" v-if="sorttype === 'desc'"></sort>
<sort label="Posts (desc)" icon="chevron" :toRoute="{ name: 'somewhere.index', query: { sort : 1, sorttype: 'asc' }}" @sort-data="sortData" v-if="sorttype === 'asc'"></sort>

Vue.component('example-component', {

	data() {
		return {
			// You could have $route.query.sort or set a custom value as per your backend
			// sort: Number(this.$route.query.sort),
			sort: 1,
			sorttype: 'asc',
		}
	},

	methods: {
		sortData(sort, direction) {
			this.sort = sort;
			this.sorttype = direction;
			this.filterData();
		},
		// Our method to GET results from a Laravel endpoint
		filterData() {
			// Using vue-resource as an example
			t.$http.get('/api/v1/posts?sort=' + t.sort + '&sorttype=' + t.sorttype)
				.then(response => {
					// do whatever you do with response data
				}).catch(error => {
					// do whatever you do with error data
				});
		}
	}

});

:white_check_mark: Props :book:

:white_check_mark: Events :ear:

NPM :octocat: