Почему не работает v-for для объекта?

Question

[Vova135798]

Я пытаюсь вывести корзину, которая имеет такое строение
но мне выводит ошибку:

[Vue warn]: Error in render: "TypeError: Invalid attempt to iterate non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method."

<template>
<div class="container">
    <div class="cart">
        <div v-if="$store.state.cart.length > 0">
            <div class="cart-item" v-for="item in $store.state.cart" :key="item.id">
                <div class="photo">
                    <img src="http://via.placeholder.com/640x360" alt="" srcset="" />
                </div>
                <div class="title">
                    {{ item.title }}
                    <div class="title-bottom">
                        <span>Добавить в избранное</span>
                        <span class="removeBtn" @click.prevent="removeFromCart(item)">Удалить
                        </span>
                    </div>

                </div>
                <div class="price">
                    {{ item.price }}$<br />
                    <form>
                        <button @click.prevent="removeQuantity(item)">-1</button>
                        {{ item.quantity }}
                        <button @click.prevent="addQuantity(item)">+1</button>
                        <input type="hidden" v-model="quantity" name="id" v-bind="product">
                        <input type="text" v-model="item.quantity" @input="setQuantity">
                    </form>
                </div>
            </div>
        </div>
        <div v-else>
            Корзина пуста<br />
            <a href="/">Перейти к покупкам</a>
        </div>
    </div>
    <div class="order">
        <span>В корзине {{ $store.state.cartCount }} товаров на сумму
            {{ totalPrice }}</span>
        <button v-on:click="sendOrder">Перейти к оплате</button>
    </div>
</div>
</template>

Comments

[Сергей Сергей]

В ошибке вполне доходчиво написано.

Answer 1

[plot_pa123]

У вас данные это объект ({{...}, {...}, {...}, ...}), попробуйте преобразовать объект в массив чтобы это выглядело вот так - [{...}, {...}, {...}]

Comments

[Vova135798]

Не совсем. Объект выглядит так: ({1:{...}, 2:{...}, 3:{...}, ...}),. сначала идет id товара, а потом объект с данными товара

[plot_pa123]

Все равно вы пытаетесь пройтись циклом по объекту. Вам нужно преобразовать это в массив, запихав id товара в объект, а не хранить его в качестве ключа, ну или если вы хотите хранить id в ключе то вам нужно будет сделать так ([id1:{...}, id2{...}, ...])
По моему нельзя у массива ключ числом задавать, если я не ошибаюсь.

[Vova135798]

plot_pa123, Подскажите, пожалуйста, как мне это сделать?

[plot_pa123]

Vova135798, Вы можете использовать функцию Object.values() . Либо же переделать бэкенд. Если у вас данные оттуда приходят. Можете пройтись циклом по ключам объекта и записать элементы в массив. Вот я в консоли делал немного

[Vova135798]

plot_pa123, Спасибо, я попробую. Данные не идут с бекенда