vue.js example code

dashboard.js

var app = new Vue({
    http: {
        headers: {
          "X-CSRFToken": window.csrf_token
        }
    },
    el: "#admin-dash-users",
    data: {
        addresses: [],
        count: 0,
        previous: null,
        next: null,
        pageSize: 20,
        currentSort: "address__user__last_name",
        currentUrl: null,
        row: null
    },

    created: function() {
        this.fetchData(api_url);
    },

    filters: {
        roundOne: function (current_gallons) {
            return current_gallons.toFixed(1);
        }
    },

    methods: {
        fetchData: function(url) {
            var self = this;
            self.currentUrl = url;
            this.$http.get(url).then(
                function (response) {
                    data = response.body;
                    self.addresses = data.results;
                    self.previous = data.previous;
                    self.next = data.next;
                    self.count = data.count;
                },
                function(error) {
                    
                }
            );
        },
        nextPage: function() {
            this.fetchData(this.next);
        },
        previousPage: function() {
            this.fetchData(this.previous);
        },
        sort: function(field) {
            if (this.currentSort == field) {
                this.currentSort = "-" + field;
            } else if (this.currentSort == "-" + field) {
                this.currentSort = field;
            } else {
                this.currentSort = field;
            }
            this.fetchData(api_url + "?ordering=" + this.currentSort);
        },
        search: function (e) {
            var name = e.target.value;
            if (!name) {
                return;
            }
            this.fetchData(api_url + "?search=" + name);
        }
    }
});