JSFiddle - React, Tailwind, and code Playground

by eagle sum

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="show">
    <input @click="orderBy" type="button" value="order by">
    <ul>
        <li v-for="item in list">{{ item }}</li>
    </ul>
</div>

JavaScript

new Vue({
        el: '#show',
        data: {
            sort: true,
            list: [8, 7, 6, 14, 23, 47, 98, 512, 554, 14, 52]
        },
        methods: {
            orderBy: function () {
                if (this.sort) {
                    this.list = this.list.sort(function(a, b) {
                        if (a < b) {
                            return -1;
                        } else if (a > b) {
                            return 1;
                        } else {
                            return 0;
                        }
                    });
                    this.sort = false
                } else {
                    this.list = this.list.sort(function(a, b) {
                        if (a > b) {
                            return -1;
                        } else if (a < b) {
                            return 1;
                        } else {
                            return 0;
                        }
                    });
                    this.sort = true
                }

            }
        }
    })