Skip to content

Instantly share code, notes, and snippets.

Created Feb 9, 2018
What would you like to do?
// Begin App.vue
<v-navigation-drawer persistent :mini-variant="miniVariant" :clipped="clipped" v-model="drawer" enable-resize-watcher fixed app>
<v-list-tile v-for="(v, i) in navLinks" :to="v.path" :exact="v.exact" :key="i" active-class="blue--text">
<v-icon v-html="v.icon"></v-icon>
<v-list-tile-title v-text="v.title"></v-list-tile-title>
<v-footer :fixed="fixed" app>
<span>&copy; 2018</span>
export default {
data: () => ({
clipped: false,
drawer: true,
fixed: false,
navLinks: [
{icon: 'grade', title: "Home", path: '/', exact: true},
{icon: 'grade', title: "API Data", path: '/api-data'},
{icon: 'grade', title: "Breadcrumbs", path: '/breadcrumbs'},
{icon: 'grade', title: "Form Stepper", path: '/form-stepper'},
{icon: 'grade', title: "Table Sorting", path: '/table-sort'}
miniVariant: false
name: 'App'
// End App.vue
// Begin main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import vueHeadful from 'vue-headful'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.component('vue-headful', vueHeadful)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
// End main.js
// Begin TableSort.vue
<vue-headful title="Vuetifiy.js Table Sorting Example" description="The meta description for the table sorting page."/>
<h1>Table Sorting Example</h1>
<th @click="sort('name')">Name</th>
<th @click="sort('age')">Age</th>
<th @click="sort('breed')">Breed</th>
<th @click="sort('gender')">Gender</th>
<tr v-for="cat in sortedCats">
debug: sort={{currentSort}}, dir={{currentSortDir}}
export default {
data: {
cats: [],
currentSort: 'name',
currentSortDir: 'asc'
created: function() {
.then(res => res.json())
.then(res => {
this.cats = res
methods: {
sort: function(s) {
if (s === this.currentSort) {
this.currentSortDir = this.currentSortDir === 'asc' ? 'desc' : 'asc'
this.currentSort = s
computed: {
sortedCats: function() {
return this.cats.sort((a,b) => {
let modifier = 1
if (this.currentSortDir === 'desc') modifier = -1
if (a[this.currentSort] < b[this.currentSort]) return -1 * modifier
if (a[this.currentSort] > b[this.currentSort]) return 1 * modifier
return 0
// End TableSort.vue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment