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

Question

我用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 似乎默认订购它们。如何避免？

Answer 1

借用另一个stackoverflow answer：

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

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

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

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