当从 vuejs 组件中的 props 解码回来时，Vuejs 改变了 json_encoded 数组的顺序答案

【问题标题】：Vuejs changes order of json_encoded array, when decodes it back from props in vuejs component当从 vuejs 组件中的 props 解码回来时，Vuejs 改变了 json_encoded 数组的顺序
【发布时间】：2018-08-22 17:24:16
【问题描述】：

PHP：

$json_string = "{
    "26":{"blabla":123,"group_id":1,"from":"27.08.2018","to":"02.09.2018"},
    "25":{"blabla":124,"group_id":1,"from":"20.08.2018","to":"26.08.2018"},
    "24":{"blabla":125,"group_id":1,"from":"20.08.2018","to":"26.08.2018"}
    }"

my.blade.php 模板：

<my-component :records={{ $json_string }}></my-component>

MyComponent.vue：

export default {
    props: ['records'],
...
mounted: function () {
        console.log(this.records);
}

输出是：

{__ob__: Observer}
24:(...)
25:(...)
26:(...)

当我使用 v-for 时，我的表中的记录顺序错误（如在 console.log 输出中）。

我做错了什么？

编辑：

我想出了一件事：

当我对索引从 0 到 x 的集合执行 json_encode 时，json 字符串为：[{some data}, {some data}]

但如果我使用->get()->keyBy('id') (laravel) 而不是 json_encode，则 json 字符串为：

 { "26":{some data}, "25":{some data}, "24":{some data} }

然后我怎么理解，问题在不同的括号中。

【问题讨论】：

chrome 开发工具格式化输出并自动对这样的内容进行排序。因此，您在控制台中看到的可能与实际数据不同。
我写道，v-for 在表格中打印我的行也是错误的方向
那是因为当您编写该字符串并通过 JSON 发送它时，它自然会按键对其进行排序。只需反转它们。
@Ohgodwhy，是的，它适用于我的情况，但如果我能通过 25 24 26？

标签： json laravel vue.js vuejs2 vue-component

【解决方案1】：

在 Javascript 中，对象的键没有顺序。如果您需要特定的顺序，请使用数组。

【讨论】：

【解决方案2】：

这是keyBy Laravel 方法的文档：https://laravel.com/docs/5.6/collections#method-keyby

我希望行数据的 ID 可以快速轻松地访问，而无需遍历所有行，并检查是否有某个键 ID 与我的特定 ID 相等。

解决方案：不要在 Laravel 中使用 keyBy 方法并将 json 字符串传递给 Vue 组件，如下所示 [{some data}, {some data}]（正如我在我的问题编辑部分中描述的那样） - 这将保持使用时的数组顺序成为。

我发现了这种简短而优雅的方法，而不是自己编写 js 函数：

它的find()方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

示例：

let row = records.find( record => record.id === idToFind );

【讨论】：