Javascript Vue.js:v-for循环在safari中反转顺序

我有以下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>

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

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

在对象上迭代时，顺序基于Object.keys（）的键枚举顺序，这不能保证在所有JavaScript引擎实现中都是一致的。

有人能确认这就是渲染被反转的原因吗

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

您可以在这个JSFIDLE中找到一个工作示例：

提前谢谢大家

编辑：

我无法使用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);
});

虽然这样做有效，但以这种方式强行下订单仍然让人感觉很不舒服。因此，我仍然希望找到更优雅的解决方案。

作为创建者：

这是意料之中的<对象上的code>v-for不保证枚举顺序，它由JS引擎决定。使用

orderBy

进行显式排序

---

你在看filterBy：我不是想过滤掉任何东西，只是为了强制执行正确的顺序。最后我使用了一个自定义函数，这是我添加到问题中的。哎呀，我指的是顺序，不是过滤器

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);
});