Как в vue.js синхронизировать товар и корзину?

Question

[Михаил Смирнов]

Добрый день!

Как правильно сделать, чтобы добавить в товар в заказ, можно было бы его там потом найти

Например если товара в заказе нет то просто добавить в заказ, если он там уже есть, то увеличить его кол-во в корзине на 1, а в в свойстве товара уменьшить на 1 кол-во на складе.

пример кода:

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                products: [],
                orderList: [],
                loader: false,
            }
        },
        mounted: function () {
            this.$nextTick(function () {

                axios.post('/api/get-products', {

                })
                    .then(response => {
                        this.products = response.data.products
                    })
                    .catch(error => {
              
                    })

            })
        },
        methods: {
            addToOrder: function(product) {
                    this.orderList.push({
                        product: product,
                        quantity: 1
                    });
            },
        },
        watch: {

        },
    }

Answer 1

[Антон Болтнев]

создай условие: если в массиве orderList есть элемент с id=“milk”(id твоего товара) , то пушишь массив, формируя в нем объект товара (количество, назыание, цена и прочее). Для этого можно использовать метод: если orderList.find(i => i.id != “milk”) , то push(). Если есть такой id, то ищешь этот объект, в нем ищешь количество и ++ увеличиваешь на 1. Все:)
Вариант 2: подруби vuex. Создай props [количество] в компоненте заказа. Свяжи props с соответствующим элементом vuex store. А на кнопку увеличения кол-ва повесь $emit, который бы увеличивал значение store на 1 по клику. У тебя будет автоматом тикать кол-во товара в корщине при изменении store.