Question

腓：

$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 string为：[{some data}, {some data}]

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

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

然后我如何理解，问题在不同的外括号中。

Answer 1

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

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

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

2 个答案: