@NurseitSharip
VueJS

Как организовать корзину товаров на VueJS, Vuex?

Здравствуйте, совсем новичок в Vue. Никак не могу организовать как можно сделать корзину товаров.
5c1caeccf1998837196460.png
Есть вот такая верстка.
Есть массив товаров:
<script>
        const product = (NameProduct, PriceProduct, DescProdusct, img) => ({NameProduct, PriceProduct, DescProdusct, img})
        const products = [
      product('name1', '130', 'desc1', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/267px-FD_1.jpg'),
      product('name2', '130', 'desc2', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/267px-FD_1.jpg'),
      product('name3', '130', 'desc3', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/267px-FD_1.jpg'),
      product('name4', '130', 'desc4', 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/FD_1.jpg/267px-FD_1.jpg')
    ];

export default {
      data: () => ({
      products: products
})
    </script>

По клику:
<v-btn 
                        flat
                        small 
                        class="black--text"
                        @click="add"
                      >
                        В корзину
                      </v-btn>

надо передать товары допустим на массив cards[] товар, при клике на add второй раз умножить лишь количества а не дать новому card новый индекс. Посоветовали сделать c Vuex, чтобы товары хранились при обновлении страницы.
Подскажите пожалуйста, как можно это сделать с помощью Vuex?
  • Вопрос задан
  • 432 просмотра
Решения вопроса 3
muzikant777
@muzikant777
PHP/Vue разработчик
Удивительно, но в официальном репозитории есть пример прям про это.
А ещё есть курс для начнинающих на основе этого примера.
И всё про корзину продуктов! Радость, счастье!
Ответ написан
@dimoff66
Кратко о себе: Я есть
Массив товаров, при нажатии кнопки "в корзину" добавляете плюс один к реквизиту orderedCount - заказанное количество...В левую колонку выводите только товары, у которых orderedCount > 0, в правую - все.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы