Блог

Я пытаюсь сделать быструю корзину покупок с помощью существующего проекта.

Мой список элементов уже сгенерирован php, и я получаю работу с такими html-элементами :

 const billets = document.querySelectorAll(".card-billet");

var products = [];

billets.forEach(billet => {
    products.push({
        title: billet.querySelector('.card-billet-title').textContent,
        price: billet.dataset.price,
        qty: billet.querySelector('select[name="billet_quantity"]').value
    });
});

const App = {
    data() {
        return {
            items: products
        }
    },
    watch: {
        items: function () {
            console.log("watched");
        },
    },
    computed: {
        total: function () {
            console.log(this.items)

            let total = 0.00;
            this.items.forEach(item => {
                total  = (item.price * item.qty);
            });
            return total;
        }
    }
}

Vue.createApp(App).mount('#checkoutApp')
 

Это работает, но только при загрузке страницы, но я пытаюсь изменить общее количество, когда меняется выбранное количество.

Я немного растерян, чтобы добиться этого, должен ли я использовать часы, но на чем ? Или что-нибудь еще ?

Наконец я нашел, как этого добиться, проблема заключалась в том, что мой массив находился вне экземпляра vue, поэтому его нельзя было обновить.

Я упростил код следующим образом :

 const App = {
    data() {
        return {
            items: []
        }
    },
    methods: {
        onChange: function (e) {
            // console.log(this.items)
            this.items = [];

            document.querySelectorAll(".card-billet").forEach(billet => {
                this.items.push({
                    title: billet.querySelector('.card-billet-title').textContent,
                    price: billet.dataset.price,
                    qty: billet.querySelector('.card-billet-qty-selector').value
                });
            });
        }
    },
    computed: {
        total: function () {
            // console.log(this.items)

            let total = 0.00;
            this.items.forEach(item => {
                total  = (item.price * item.qty);
            });
            return total;
        }
    }
}

Vue.createApp(App).mount('#checkoutApp')