Vue2 基于API可变数量输入框实现商品总价与小计联动更新

• 模板指令语法错误：v-for属于Vue模板指令，其绑定的表达式区域不能嵌套{{ }}插值语法，原写法会直接触发模板编译报错
• 响应式属性缺失：接口返回的productList初始数据里，每个商品对象本身没有qty、productTotal字段，直接在绑定中使用动态新增的属性，会触发Vue2的非响应式限制，输入值修改时页面无法同步更新
• 方法上下文错误：updateCart方法内引用的this.products是v-for循环的临时作用域变量，在methods定义的函数作用域中完全无法访问，运行时会抛出undefined错误
• 字段引用错误：单个商品的单价对应字段是unit_price，原代码中读取的this.productList.price字段不存在，计算结果会是NaN

推荐用Vue的计算属性替代手动触发的更新逻辑，减少冗余代码，避免手动维护状态的疏漏：

1. 接口拉取到商品列表后，先遍历每个商品，提前初始化好qty（默认取最小起订量值）、productTotal响应式字段，规避Vue2非响应式的问题
2. 用计算属性自动追踪输入框的值变化，实时计算单商品总价和全局订单小计

修正后的完整代码 #

模板部分 #

<div v-for="product in productList" :key="product.product_id">
  <input 
    type="number" 
    v-model.number="product.qty"
    :min="product.minimum_order"
  >
  <p>单商品总价：{{ product.productTotal }}</p>
</div>
<p>全局订单小计：{{ subTotal }}</p>

脚本部分 #

export default {
  data() {
    return {
      cartID: null,
      productList: [],
    }
  },
  computed: {
    subTotal() {
      let totalPrice = 0
      this.productList.forEach(product => {
        // 实时计算单个商品的总价
        product.productTotal = product.qty * Number(product.unit_price)
        // 累加计算全局订单小计
        totalPrice += product.productTotal
      })
      return totalPrice
    }
  },
  methods: {
    // 替换为实际的商品列表API请求逻辑
    async getProductList() {
      const res = await yourApiCall()
      // 初始化每个商品的响应式字段
      this.productList = res.productList.map(item => ({
        ...item,
        qty: Number(item.minimum_order),
        productTotal: 0
      }))
    }
  },
  mounted() {
    this.getProductList()
  }
}

实现说明 #

• v-model.number修饰符会自动将输入框的字符串值转为数字类型，避免计算时出现字符串拼接的异常
• 计算属性会自动追踪productList内所有qty值的变化，只要用户修改输入框，单商品总价、全局小计会自动同步刷新，不需要额外绑定change事件写更新逻辑
• 在数据初始化阶段就把需要的字段挂载到每个商品对象上，完全符合Vue2的响应式规则，不会出现数据更新但页面不刷新的问题

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