vue watch 数组对象中用法

发布时间 2023-08-14 15:05:47作者: 盘思动

[{count:1,price:2},{count:2,price:3}] 如何通过监听里面count,price,每个对象中增加赋值totalprice字段

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        Count: {{ item.count }}, Price: {{ item.price }}, Total Price: {{ item.totalPrice }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { count: 1, price: 2 },
        { count: 2, price: 3 },
      ],
    };
  },
  watch: {
    items: {
      deep: true,
      immediat:true,
      handler(newVal, oldVal) {
        for (let i = 0; i < newVal.length; i++) {
          const item = newVal[i];
          item.totalPrice = item.count * item.price;
        }
      },
    },
  },
};
</script>