Skip to content

Instantly share code, notes, and snippets.

/vuetified.vue

Created Feb 9, 2018
Embed
What would you like to do?
// Begin App.vue
<template>
<v-app>
<v-navigation-drawer persistent :mini-variant="miniVariant" :clipped="clipped" v-model="drawer" enable-resize-watcher fixed app>
<v-list>
<v-list-tile v-for="(v, i) in navLinks" :to="v.path" :exact="v.exact" :key="i" active-class="blue--text">
<v-list-tile-action>
<v-icon v-html="v.icon"></v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title v-text="v.title"></v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-content>
<router-view/>
</v-content>
<v-footer :fixed="fixed" app>
<span>&copy; 2018</span>
</v-footer>
</v-app>
</template>
<script>
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'
}
</script>
// 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.use(Vuetify)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
// End main.js
// Begin TableSort.vue
<template>
<v-container>
<vue-headful title="Vuetifiy.js Table Sorting Example" description="The meta description for the table sorting page."/>
<h1>Table Sorting Example</h1>
<table>
<thead>
<tr>
<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>
</thead>
<tbody>
<tr v-for="cat in sortedCats">
<td>{{cat.name}}</td>
<td>{{cat.age}}</td>
<td>{{cat.breed}}</td>
<td>{{cat.gender}}</td>
</tr>
</tbody>
</table>
debug: sort={{currentSort}}, dir={{currentSortDir}}
</v-container>
</template>
<script>
export default {
data: {
cats: [],
currentSort: 'name',
currentSortDir: 'asc'
},
created: function() {
fetch('https://api.myjson.com/bins/s9lux')
.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
})
}
}
}
</script>
// End TableSort.vue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment