Vue：如何在循环模板中 onChange 时更新发票总计值？

你的核心问题是：切换税项选择框时，仅更新了item.tax_id，但item.tax对象未同步更新，导致计算总计值时仍使用旧税率，所以数值不会变化。下面提供两种可行方案：

方案一：实时匹配税率（推荐，避免数据冗余） #

直接去掉items中每个对象的tax字段，通过tax_id实时从taxes数组中获取对应税率，无需维护重复数据。

修改后代码： #

<template>
<div class="cs-container bg-white">
  <ul class="list-none">
    <li v-for="item in items" :key="item.id">
      <h2 class="bold text-lg">{{ item.details }}</h2>

      <input type="number" v-model="item.qty"/>

      <select v-model="item.tax_id">
        <option v-for="tax in taxes" :key="tax.id" :value="tax.id">
          {{ tax.name }}
        </option>
      </select>

      <input type="number" v-model="item.rate" />

      <div class="bg-gray-100 p-3 border border-gray-200 mb-3">
        Total:
        <span v-if="getTaxById(item.tax_id)">
          {{ 
            itemWithTax(item.rate, item.qty, getTaxById(item.tax_id).rate)
          }}
        </span>
      </div>
    </li>
  </ul>
</div>
</template>
<script setup>
import { ref } from "vue";

const itemWithTax = (rate, qty, tax_rate) => {
    let total = rate * qty;
    let percent = tax_rate / 100;
    percent = total * percent;
    return total + percent;
};

// 根据tax_id获取对应税项
const getTaxById = (taxId) => {
  return taxes.find(tax => tax.id === taxId) || {};
};

const items = ref([
    {
        id: 1,
        tax_id: 1,
        details: "Neque offi",
        qty: 3,
        rate: 100,
    },
    {
        id: 6,
        tax_id: 1,
        details: "Neque officiis molestiae.",
        qty: 5,
        rate: 310,
    },
    {
        id: 7,
        tax_id: 2,
        details: "Totam ab cum.",
        qty: 4,
        rate: 820,
    },
    {
        id: 8,
        tax_id: 2,
        details: "Et aut aut.",
        qty: 3,
        rate: 140,
    },
]);

const taxes = [
    {
        id: 1,
        name: "Service Tax (10%)",
        rate: 10,
    },
    {
        id: 2,
        name: "GST (17%)",
        rate: 17,
    },
];
</script>

方案二：同步更新item.tax对象 #

如果需要保留item.tax字段存储完整税项信息，可在税项选择变更时手动更新该对象：

修改后代码： #

<template>
<div class="cs-container bg-white">
  <ul class="list-none">
    <li v-for="item in items" :key="item.id">
      <h2 class="bold text-lg">{{ item.details }}</h2>

      <input type="number" v-model="item.qty"/>

      <!-- 添加change事件触发更新 -->
      <select v-model="item.tax_id" @change="updateItemTax(item)">
        <option v-for="tax in taxes" :key="tax.id" :value="tax.id">
          {{ tax.name }}
        </option>
      </select>

      <input type="number" v-model="item.rate" />

      <div class="bg-gray-100 p-3 border border-gray-200 mb-3">
        Total:
        <span v-if="item?.tax">
          {{ 
            itemWithTax(item.rate, item.qty, item.tax.rate)
          }}
        </span>
      </div>
    </li>
  </ul>
</div>
</template>
<script setup>
import { ref } from "vue";

const itemWithTax = (rate, qty, tax_rate) => {
    let total = rate * qty;
    let percent = tax_rate / 100;
    percent = total * percent;
    return total + percent;
};

// 根据选中的tax_id更新item的tax对象
const updateItemTax = (item) => {
  const selectedTax = taxes.find(tax => tax.id === item.tax_id);
  if (selectedTax) {
    item.tax = {...selectedTax};
  }
};

const items = ref([
    {
        id: 1,
        tax_id: 1,
        details: "Neque offi",
        qty: 3,
        rate: 100,
        tax: {
            id: 1,
            name: "Service Tax",
            rate: 10,
        },
    },
    {
        id: 6,
        tax_id: 1,
        details: "Neque officiis molestiae.",
        qty: 5,
        rate: 310,
        tax: {
            id: 1,
            name: "Service Tax",
            rate: 10,
        },
    },
    {
        id: 7,
        tax_id: 2,
        details: "Totam ab cum.",
        qty: 4,
        rate: 820,
        tax: {
            id: 2,
            name: "GST",
            rate: 17,
        },
    },
    {
        id: 8,
        tax_id: 2,
        details: "Et aut aut.",
        qty: 3,
        rate: 140,
        tax: {
            id: 2,
            name: "GST",
            rate: 17,
        },
    },
]);

const taxes = [
    {
        id: 1,
        name: "Service Tax (10%)",
        rate: 10,
    },
    {
        id: 2,
        name: "GST (17%)",
        rate: 17,
    },
];
</script>

两种方案都能实现税项切换后实时更新总计值的效果，方案一更简洁，推荐使用。

内容的提问来源于stack exchange，提问作者Key