om/public/routes/home.js

const HomeRouter = {
    template: `
<div id="om-msg-cards">
    <MsgCard
        v-for="id in messagelist.slice().reverse()"
        :key="id"
        :msg="messages[id] || {}"
    ></MsgCard>
</div>`,
    data: function () {
        return {
            messagelist: _messagelist,
            messages: _messages,
        };
    },
    methods: {
        /*refresh_messages: function () {
            _messages.push({ //////// alt
                id: 42,
                subject: "xxx",
                message: "warum habt ihr auch so viel",
                user: "nobody",
                tags: "foo"
            });
        },*/
        list_messages: function () {
            $.ajax({url: "api/ids", method: "GET"})
             .done(jd => {
                // NICHT SO wg. Vue: _messagelist = jd;
                _messagelist.splice(0, _messagelist.length);
                _messagelist.push.apply(_messagelist, jd);
                console.log("jd: "+jd);
                for (var e in jd) {
                    if (!_messages[jd[e]]) {
                        get_insert_message(jd[e]);
                    }
                }
            }).fail(function (e, f, g) {
                console.log("err: " + e + f + g);
            });
        }
    },

    mounted: function () {
        this.list_messages();
        //this.refresh_messages();
    }
};

function get_insert_message(id) {
    $.ajax({ url: "api/msg/"+id, method: "GET" }).done(function (msg) {
        Vue.set(_messages, id, msg);
    }).fail(function (e, f, g) {
        console.log("cannot load " + id + ".json: " + e + f + g);
    })
}
/*$(document).ready(function () {
    console.log("egal");
    $.get('list.json').done(function (jd) {
        // _messagelist = jd;
        _messagelist.splice(0, _messagelist.length);
        _messagelist.push.apply(_messagelist, jd);
        console.log("egal2");
        //$('#xxx').text(jd[0]);
        for (var e in jd) {
            if (!_messages[jd[e]]) {
                get_insert_message(jd[e]);
            }
        }
    }).fail(function (e, f, g) {
        console.log("egal3: " + e + f + g);
    });
});*/