vue js 不按键对数组进行排序

Posted 2023-02-22

【中文标题】vue js 不按键对数组进行排序

【英文标题】：vue js DO NOT sort array by keys

【发布时间】：2018-03-13 15:42:04

【问题描述】：

我用vue js做了一个购物车，想保持产品按输入的顺序显示。问题是产品是关联数组，其 id 用于键 类似[1 => ['name' => 'product1', 'price' => 100', 'quantity' => 1]] 其中键 1 是产品的 id。问题是当我将购物车对象作为 json 返回时，产品数组默认按其键查看排序。 这是我的代码：

let app = this 
axios.post(app.addToCartRoute, 
    _token: ' csrf_token() ',
    product_slug: slug
)
.then(function(response) 
    if(!app.showCart) 
        setTimeout(() => 
           app.cart = response.data
        , 250)
    
    else 
        app.cart = response.data
    
        app.showCart = true
        console.log(response.data)
)
.catch(function(error) 
    console.log(error)
)

假设我首先将 id 为 3 的产品添加到购物车中，数组如下所示：[3 => ['name' => 'product3', 'price' => 15.00]] 然后我添加 id 为 1 的产品，数组开始如下所示：[1 => ['name' => 'product1', 'price' => 13.00], 3 => ['name' => 'product3', 'price' => 15.00]] 我不希望这样，但 vue js 似乎默认订购它们。如何避免？

【问题讨论】：

如果添加到购物车的顺序很重要，您应该在添加时将顺序存储为对象的属性。

这就像你的服务器端代码可能正在订购它

@chiliNUT 我查过了，返回的服务端json没问题，是vue js重新排序

您能否从浏览器网络调用中发布“axios.post(app.addToCartRoute)”的请求负载和响应

【参考方案1】：

借用另一个*** answer：

javascript 没有您想象中的“关联数组”。相反，您只需能够使用类似数组的语法设置对象属性，以及迭代对象属性的能力。

这样做的结果是无法保证您遍历属性的顺序...

换句话说，Vue 不会重新排序您的数据。相反，response.data 是一个对象，而 Javascript 对象没有与 php 关联数组相同的“顺序”概念。

如果产品的排序很重要，那么您应该将每个产品与一个位置相关联。然后，为了显示它们，您可以使用该位置信息对它们进行排序。

【讨论】：

这是正确的解决方案，以防其他人遇到这个问题。

我通过在键前添加“_”来修复它，因此键现在看起来像这样：“_3”、“_5”等等，并且不再重新排序