app.js

"use strict";

Vue.component('files', {
    props: ['version'],
    template:'<div> \
        <button @click="update_files">Files</button> \
        <table class="listing" v-if="result">\
            <tr v-for="d in result.files">\
                <td>{{d.name}} </td> \
                <td>{{d.info.size | filesize}} </td> \
                <td>{{d.info.modified | moment}} </td> \
            </tr>\
        </table>\
    </div>',
    data: function() {
        return {
            result: this.result
        }
    },
    filters: {
        filesize: function(size) {
          var lang = $('html').attr('lang');
          var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
          var i = 0;
          while (size > 900) {
            size /= 1024;
            i++;
          }
          return (Math.round(size * 100) / 100) + ' ' + fSExt[i];
        } ,
        moment: function(dt) {
            var lang = $('html').attr('lang');
            moment.locale(lang);
            var m = moment.utc(dt);
            return m.fromNow();
        } 
    },
    methods: {
        update_files: function() {

            axios.get(`${CONTEXT_URL}/file_info_for_version?version=${this.version}&as_json:bool=1`)
            .then(response => {
                this.result = response.data
            });
        }
    }
})

let elements = document.getElementsByClassName('vue');

for (let i in elements) {
    new Vue({
        el: elements[i]
    })
}