vue监听器计算商品总价

假设你的商品列表数据是一个数组，每个商品对象包含价格和数量两个属性，你可以使用computed属性来计算商品的总价。代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <span>{{ item.name }}</span>
        <span>{{ item.price }}</span>
        <input type="number" v-model="item.quantity" @change="updateQuantity(index)">
      </li>
    </ul>
    <div>Total: {{ total }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Product 1', price: 10, quantity: 1 },
        { name: 'Product 2', price: 20, quantity: 2 },
        { name: 'Product 3', price: 30, quantity: 3 },
      ],
    };
  },
  computed: {
    total() {
      return this.items.reduce((acc, item) => acc + item.price * item.quantity, 0);
    },
  },
  methods: {
    updateQuantity(index) {
      this.$set(this.items, index, this.items[index]);
    },
  },
};
</script>

在上述代码中，我们使用了computed属性来计算商品的总价，它会自动跟踪items数组中每个商品的价格和数量的变化，并在其中任何一个发生变化时重新计算总价。我们还为每个商品数量的input元素添加了一个@change事件监听器，以便在数量发生变化时更新items数组中的数据。注意，我们使用Vue的$set方法来更新数组中的数据，以便Vue能够正确地跟踪数据的变化。