观看 select 数量 select 或使用 Vue 3

Question

我正在尝试使用现有项目制作一个快速购物车。

我的列表项已经由 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')

这有效，但仅在页面加载时有效，但我正尝试在我的 select 数量发生变化时更改总数。

我有点不知所措，我应该使用 watch 吗？或者其他什么？

Answer 1

终于找到了实现方法，问题是我的数组不在 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')

观看 select 数量 select 或使用 Vue 3

Watch a select quantity selector with Vue 3

javascript

vuejs3

shopping-cart