vue自动贩卖机案例购买合计怎么写

在Vue.js中创建一个自动贩卖机的购物车功能，通常会涉及组件化的设计以及数据管理。下面是一个简化版的例子，展示如何计算商品总价：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in products" :key="index">
        {{ item.name }} - {{ item.price }}
        <button @click="removeItem(index)">删除</button>
        <button @click="increaseQuantity(index)">+1</button>
        <button @click="decreaseQuantity(index)">-1</button>
      </li>
    </ul>
    <p>总计：{{ totalPrice }}</p>
    <button @click="purchase">购买</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: '饮料', price: 5 },
        // 更多产品...
      ],
      quantities: [], // 使用数组保存每个产品的数量
      totalPrice: 0,
    };
  },
  methods: {
    removeItem(index) {
      this.quantities.splice(index, 1);
      this.calculateTotalPrice();
    },
    increaseQuantity(index) {
      if (this.quantities[index] < this.products[index].quantity) {
        this.quantities[index]++;
        this.calculateTotalPrice();
      }
    },
    decreaseQuantity(index) {
      if (this.quantities[index] > 0) {
        this.quantities[index]--;
        this.calculateTotalPrice();
      }
    },
    calculateTotalPrice() {
      let total = 0;
      for (let i = 0; i < this.products.length; i++) {
        const quantity = this.quantities[i] || 0;
        total += quantity * this.products[i].price;
      }
      this.totalPrice = total;
    },
    purchase() {
      // 这里可以添加实际购买逻辑，比如提交订单等
      console.log('购买');
    },
  },
};
</script>

在这个例子中，我们首先定义了产品列表和初始数量，然后通过`calculateTotalPrice`方法实时计算总价。购买按钮`purchase`会被触发实际购买操作。