Vue3监听select数量选择器实现购物车总金额实时更新问题

你当前的实现仅在初始化阶段一次性读取了原生select的初始值存入Vue的响应式数组items，后续修改原生select的取值时，变更没有同步到Vue管理的响应式数据中，因此依赖items的计算属性total不会触发重新计算，和watch监听器无关。

直接给PHP渲染的select元素添加v-model绑定，和对应下标的商品qty属性做双向绑定，select变更时会自动同步到Vue的响应式数据，total会自动更新。
示例PHP渲染逻辑：

<?php foreach ($billet_list as $index => $billet): ?>
<div class="card-billet">
  <!-- 其他商品结构 -->
  <select v-model="items[<?= $index ?>].qty" name="billet_quantity">
    <!-- 数量选项 -->
  </select>
</div>
<?php endforeach; ?>

给所有数量select添加change事件监听，每次取值变更时手动同步到对应下标的items属性即可，Vue3的响应式系统可以监听到数组元素属性的变更，自动触发total重计算。
修改后的完整JS代码：

const billets = document.querySelectorAll(".card-billet");
const products = [];
// 存储Vue实例供外部事件监听调用
let appInstance = null;

billets.forEach((billet, index) => {
    const qtySelect = billet.querySelector('select[name="billet_quantity"]');
    // 初始化商品数据，显式转换为数字避免计算错误
    const product = {
        title: billet.querySelector('.card-billet-title').textContent,
        price: Number(billet.dataset.price),
        qty: Number(qtySelect.value)
    };
    products.push(product);
    // 监听select变更同步到Vue响应式数据
    qtySelect.addEventListener('change', () => {
        appInstance.items[index].qty = Number(qtySelect.value);
    });
});

const App = {
    data() {
        return {
            items: products
        }
    },
    computed: {
        total() {
            // 用reduce简化求和逻辑，保留两位小数符合金额展示要求
            return this.items.reduce((sum, item) => sum + (item.price * item.qty), 0).toFixed(2);
        }
    }
}

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

• 不需要额外添加watch监听器，计算属性本身会在依赖的响应式数据变更时自动重新计算，你之前的watch没有触发就是因为items的数据从未被修改过
• 读取dataset.price和select的value时显式转换为数字，避免字符串隐式转换导致的计算异常

内容的提问来源于stack exchange，提问作者Jean R.