Vue中如何在v-for内传递索引给方法/计算属性以获取对应数据？

没问题呀！不过你当前的写法有个逻辑误区——v-for里的index是遍历过程中才会生成的变量，你没法把它当成遍历数据源的参数来用（因为这时候遍历还没开始，index根本不存在）。咱们来调整一下写法，完美实现你要的需求：

核心思路 #

先把你的data对象转换成适合v-for遍历的数组结构，然后在遍历过程中拿到对应的索引，再把索引传递给方法或计算属性来获取目标值。

示例实现 #

假设你的this.data结构是这样的：

data() {
  return {
    data: {
      category_01: { extras: ['值1', '值2', '值3'] },
      category_02: { extras: ['值4', '值5', '值6'] },
      // ...更多分类
    }
  }
}

方式一：使用方法处理 #

<template>
  <!-- 第一步：先遍历转换后的分类数组，拿到分类的索引catIndex -->
  <div v-for="(category, catIndex) in categoryList" :key="catIndex">
    <!-- 第二步：遍历当前分类的extras数组，拿到项的索引itemIndex -->
    <div v-for="(item, itemIndex) in category.extras" :key="itemIndex">
      <!-- 第三步：把两个索引传给方法，获取对应的值 -->
      当前值：{{ getTargetValue(catIndex, itemIndex) }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        category_01: { extras: ['值1', '值2', '值3'] },
        category_02: { extras: ['值4', '值5', '值6'] }
      }
    }
  },
  computed: {
    // 把原始data对象转换成数组，方便v-for遍历
    categoryList() {
      const categoryKeys = Object.keys(this.data);
      // 根据key数组，返回对应的分类对象数组
      return categoryKeys.map(key => this.data[key]);
    }
  },
  methods: {
    getTargetValue(catIndex, itemIndex) {
      // 根据分类索引拿到对应的key
      const targetKey = Object.keys(this.data)[catIndex];
      // 返回对应索引的extras值
      return this.data[targetKey].extras[itemIndex];
    }
  }
}
</script>

方式二：使用计算属性预处理（更高效） #

如果你的数据不会频繁变动，用计算属性预处理好所有需要的值会更高效：

<template>
  <div v-for="(item, index) in allTargetValues" :key="index">
    {{ item.value }}（分类索引：{{ item.catIndex }}，项索引：{{ item.itemIndex }}）
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        category_01: { extras: ['值1', '值2', '值3'] },
        category_02: { extras: ['值4', '值5', '值6'] }
      }
    }
  },
  computed: {
    allTargetValues() {
      const result = [];
      const categoryKeys = Object.keys(this.data);
      // 遍历每个分类的索引和key
      categoryKeys.forEach((key, catIndex) => {
        // 遍历当前分类的extras，把值和索引关联后存入结果
        this.data[key].extras.forEach((value, itemIndex) => {
          result.push({
            catIndex,
            itemIndex,
            value
          });
        });
      });
      return result;
    }
  }
}
</script>

关键注意点 #

• 不要在v-for的数据源位置（in后面的部分）使用依赖index的表达式，因为index是遍历过程中才生成的。
• 给v-for加上唯一的:key属性，这是Vue的性能优化要求，也能避免渲染错误。
• 如果需要频繁调用方法，优先考虑用计算属性预处理，方法会在每次渲染时重新执行，而计算属性有缓存。

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