VueJS Sort ⚡

• A simple Vue.js sorting wrapper.

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

Requirements

• Vue.js 2.x

✅ Install 👌

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

✅ Usage 🎓

Register the component globally:

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

Or use locally

import sort from 'vuejs-sort';

✅ Example 🍀

<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
				});
		}
	}

});

✅ Props 📖

Name	Type	Description
icon	String	(optional) Default is chevron; Refer Semantic-UI Icons for specifying which icons you want.
label	String	(optional) Is responsible for the label that'll be displayed which will be clickable.
toRoute	Object	An object containing name (viz. Route Name) & query (viz. a object containing sort & sorttype similar to $route.query)

✅ Events 👂

Name	Description
sort-data	Emits sort & sorttype.

NPM