Vue响应式数组索引更新问题：服务价格计算无法匹配正确下标

问题核心 #

你遇到的问题有两个关键点：

1. 直接通过servicePrice[index]赋值无法触发Vue响应式更新，因为reactive包裹的数组对索引直接赋值的变更追踪存在局限；
2. HTML模板中调用calculatePrice时传参错误，service[index]是冗余且错误的写法（v-for循环中的service已经是当前项），这会导致计算时拿到undefined，进而引发异常。

修正步骤 #

1. 修复模板传参错误

将模板中的service[index]改为直接使用循环变量service，同时用v-model.number自动转换输入为数字类型，避免字符串相乘的逻辑错误：

<div v-for="(service, index) in form.services" :key="service.id"> <!-- 优先用服务的唯一ID作为key，避免index作为key引发的渲染异常 -->
  <Input v-model.number="service.quantity" @change="calculatePrice(index)"/>
  <Input v-model="servicePrice[index]" disabled/>
</div>

2. 修正总价计算函数

推荐两种实现方式，任选其一即可：

方式一：使用ref定义数组（更简洁直观）

ref包裹的数组支持直接通过索引赋值并触发响应式更新：

const servicePrice = ref([])

const calculatePrice = (index) => {
  const { quantity, price } = form.services[index]
  // 计算并保留两位小数
  const totalPrice = Math.round((quantity * price) * 100) / 100
  // 直接赋值对应索引位置
  servicePrice.value[index] = totalPrice
}

方式二：使用reactive数组配合splice修改

如果坚持使用reactive，可以用数组的splice方法修改对应索引的元素，确保触发响应式：

const servicePrice = reactive([])

const calculatePrice = (index) => {
  const { quantity, price } = form.services[index]
  const totalPrice = Math.round((quantity * price) * 100) / 100
  // 替换对应索引的元素
  servicePrice.splice(index, 1, totalPrice)
}

3. 配套处理服务的新增与移除

为了保证servicePrice和form.services的长度始终对应，新增和移除服务时要同步更新servicePrice：

// 新增服务
const addService = () => {
  // 假设新增的服务默认包含id、quantity、price字段
  form.services.push({ id: Date.now(), quantity: 1, price: 0 })
  // 同步新增总价初始值
  servicePrice.value.push(0) // 使用reactive时直接写servicePrice.push(0)
}

// 移除服务
const removeService = (index) => {
  form.services.splice(index, 1)
  servicePrice.value.splice(index, 1) // 使用reactive时直接写servicePrice.splice(index, 1)
}

补充说明 #

之前尝试servicePrice[index]赋值返回-1，大概率是因为数组长度不足时直接赋值导致的异常，加上传参错误拿到undefined后计算出非法值，配合reactive的追踪局限，最终出现异常结果。按照上述方案修正后即可解决索引赋值不更新、计算异常的问题。

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