Vue - attributes can contain functions

This isn't useful, but it's an interesting proof of concept showing setting a data attribute to a function.

by khamer

HTML

<main>
    <ul>
        <li v-for="user in sorted" v-text="user"></li>
    </ul>
    
    <button @click="sort = (a,b) => a > b">sort alphabetically</button>
    <button @click="sort = (a,b) => a < b">sort reverse alphabetically</button>
    <button @click="sort = (a,b) => a.length > b.length">by length</button>
</main>

JavaScript

new Vue({
	el: 'main',
    
    computed: {
    	sorted() {
        return this.users.slice().sort(this.sort);
      },
    },
    
    data: {
    	sort: (a,b) => a > b,
    	users: ['kevin', 'jeff', 'dan', 'kerri', 'bill', 'shawna', 'alex'],
    },
})