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

Posted 2023-02-23

【中文标题】当从 vuejs 组件中的 props 解码回来时，Vuejs 改变了 json_encoded 数组的顺序

【英文标题】：Vuejs changes order of json_encoded array, when decodes it back from props in vuejs component

【发布时间】：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？

【参考方案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 );