Vue中如何在v-for内使用动态变量访问对象动态属性？

你的代码存在两个核心问题：

1. 遍历对象的方式错误：tmp_pp是单个对象而非数组，v-for="(pp, i) in tmp_pp"会遍历该对象的所有键值对，此时pp是属性值（比如"20"），i是属性名（比如"q_p1_cost"），完全不符合你按序号1、2循环的需求。
2. 动态属性访问语法错误：
   • 模板字符串写法{{ pp.q_p$(i)_cost }}只是输出字符串文本，不会解析为对象属性访问，且pp并非原对象。
   • pp.q_p[i]_margin是无效的JS语法，无法正确解析动态键名。

正确实现方式 #

步骤1：生成序号数组

首先需要获取你要循环的序号集合（比如1、2、3...），可以通过计算属性从tmp_pp的键中提取，或者直接指定固定序号：

// 在Vue组件的computed中定义
computed: {
  ppIndexes() {
    // 从tmp_pp的键中提取所有q_pX_格式的序号，去重排序
    return Object.keys(this.tmp_pp)
      .filter(key => /q_p\d+_/.test(key))
      .map(key => key.match(/q_p(\d+)_/)[1])
      .map(Number)
      .filter((val, idx, arr) => arr.indexOf(val) === idx)
      .sort((a, b) => a - b);
  }
}

步骤2：在模板中循环并动态访问属性

使用生成的序号数组遍历，通过方括号语法动态拼接键名访问对象属性：

<div class="grid grid-cols-6 gap-1" v-for="index in ppIndexes" :key="index">
  <div>
    <strong>{{ index }}</strong>
  </div>
  <div>
    <strong>{{ tmp_pp[`q_p${index}_cost`] }}</strong>
  </div>
  <div>
    <strong>{{ tmp_pp[`q_p${index}_margin`] }}</strong>
  </div>
</div>

如果是固定数量的序号（比如已知只有2个），也可以直接简化为：

<div class="grid grid-cols-6 gap-1" v-for="index in [1,2]" :key="index">
  <!-- 内容同上 -->
</div>

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