如何让v-for列表即时响应用户修改的产品信息变化？

1. 先修正模板里的数据绑定错误 #

你的代码模板里有两处明显问题，直接导致数据展示异常：

• 属性名写错：customer?.product?.productName 里的product应该是products（和data里定义的数组属性一致）
• products是数组，不能直接读取productName，得遍历每个产品才能正确展示

修改后的模板代码：

<template>
  <div>
    <table>
      <thead>
      <tr>
        <th scope="col">
          <span>产品名称</span>
        </th>
      </tr>
      </thead>
      <tbody>
      <!-- 遍历客户，用客户的唯一标识当key，别用索引 -->
      <tr v-for="customer in customers" :key="customer.name + customer.surname">
        <td>
          <div>
            <!-- 遍历当前客户的所有产品，用产品的i值当key -->
            <p v-for="product in customer.products" :key="product.i">
              {{ product.productName || "" }}
            </p>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

2. 按Vue响应式规则修改产品名称 #

Vue对数组和对象的响应式有特定要求，错误的修改方式会导致页面不更新，以下是正确的修改示例：

// 修改已有产品名称（直接改对象属性即可，Vue2/3都支持）
this.customers[0].products[0].productName = "新住宅";

// 如果是替换整个产品对象，要用数组变异方法（Vue2必须这么做，Vue3可直接赋值）
this.customers[0].products.splice(0, 1, {i: 1, productName: "新住宅"});

// ❌ 别这么写，Vue2无法检测到这种索引赋值的变化
// this.customers[0].products[0] = {i:1, productName: "新住宅"};

3. 排查其他可能的响应式失效情况 #

• 别用Object.freeze()冻结customers或products对象，冻结后Vue无法追踪属性变化
• 如果是异步请求后修改数据，确保修改的是this.customers引用的原数组，别重新赋值新数组后没同步到data里

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