Vue.js：v-for循环在野生动物园中颠倒顺序

Question

我有以下Vue模板：

<div id="app">
[[gameList | json]]
<br><br>
<table>
    <tr v-for="gameSet in gameList">
        <td>[[gameSet.season    | json]]</td>
        <td>[[gameSet.offSeason | json]]</td>
    </tr>
</table>

随附以下Vue代码：

Vue.config.delimiters = ["[[", "]]"];
var app = new Vue({

el: "#app",

data: {
    gameListJSON: '[{"id":"9","season":{"season0":{"type":"player","value":"23"},"season1":{"type":"staff","value":"64"},"season2":{"type":"visitor","value":"5"}},"offSeason":{"offSeason0":{"type":"player","value":"54"},"offSeason1":{"type":"staff","value":"43"},"offSeason2":{"type":"visitor","value":"45"}}}]'
},
computed: {
    gameList: function () {
        var list;

        list = $.parseJSON(this.gameListJSON);

        $("#output").html(JSON.stringify(list));
        return list;
    }
}
});

它可以在到目前为止我测试过的所有浏览器中正确显示，但Safari除外。 由于某种原因，它显示了以相反顺序从JSON解析的所有对象。 只要将v-for循环添加到代码中，这只会在渲染期间发生。 没有它，gameList将按预期方式呈现。 在计算功能内，该顺序仍然完好无损，就像在#output div中打印该顺序一样。

我从Vue文档中收集到的信息可能是我遇到的以下警告。

When iterating over an Object, the order is based on the key enumeration order of Object.keys(), which is not guaranteed to be consistent in all JavaScript engine implementations.

谁能确认这就是渲染反转的原因？

保持对象渲染顺序的最佳方法是什么？

您可以在此JSFiddle中找到一个有效的示例： http : //jsfiddle.net/d9u6fump/

谢谢大家。

编辑：

我无法使用orderBy函数在属性名称上对其进行排序，因此最终创建了一个自定义过滤器：

Vue.filter('orderedJSON', function(gameSet){
    var json, counter;

    json = {};

    counter = 0;
    for( var gameElement in gameSet){
        gameElement = gameElement.replace(/[0-9]/g, '');
        gameElement += counter;

        json[gameElement] = gameSet[gameElement];
        counter++;
    }

    return JSON.stringify(json);
});

尽管此方法有效，但必须强制以这种方式进行操作还是很棘手的。 因此，我仍然愿意寻求更优雅的解决方案。

Answer 1

正如创作者所说 ：

这是预期的。 v-for on对象不能保证枚举顺序 ，它由JS引擎确定。 使用orderBy进行显式排序。