Question

我已经制作了一个带有vue js的购物车，并希望按照他们输入的顺序显示产品。问题是产品是关联数组，其id用于密钥像[1 => ['name' => 'product1', 'price' => 100', 'quantity' => 1]]之类的东西键1是产品的id。问题是当我将购物车对象作为json返回时，默认情况下通过它的键查看products数组。这是我的代码：

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没有＆＃34;关联数组＆＃34;你对它们的思考方式。相反，您只需使用类似数组的语法设置对象属性，并能够迭代对象的属性。

这样做的结果是无法保证迭代属性的顺序 ......

换句话说，Vue不会重新排序您的数据。相反，response.data是一个对象，而Javascript对象没有相同的概念＆＃34; order＆＃34;作为PHP关联数组。

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

Answer 2

此评论实际上对我有用，现在的行为符合预期：

我通过在键前面添加'_'来修复它，因此键现在看起来像这样：'_3'，'_ 5'等，并且不再对它们进行重新排序– TheAngelM97

vue js不要按键排序数组

2 个答案: