Init 6

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 :data="sortingData" label="Name" icon="chevron" v-on:sort-data="sortData"></sort>

Vue.component('example-component', {

	data() {
		return {
			// Our data object that holds the Sorting data
			sortingData: {},
		}
	},

	created() {
		// Fetch initial results
		this.sortData();
	},

	methods: {
		// Our method to GET results from a Laravel endpoint
		sortData(sort, direction) {
			if (typeof sort === 'undefined') {
				sort = 1;
			}

			// Using vue-resource as an example
			this.$http.get('example/results?sort=' + page + '&direction=' + direction)
				.then(response => {
					return response.json();
				}).then(data => {
					this.sortingData = data;
				});
		}
	}

});

✅ 📖 Props

Name	Type	Description
data	Object	An object containing sort (you can set this at your backend) & sorttype (viz. Direction eg. 'asc', 'desc')
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.

{
	sort: 1,
	sorttype: 'asc',
}

✅ 👂 Events

Name	Description
sort-data	Triggered when a user changes sort & sorttype.

NPM