Vue中v-for循环如何结合props值动态匹配对应JSON数据源

方案1：使用计算属性（推荐） #

该方案逻辑与模板分离，可读性和可维护性更高，还可方便添加容错逻辑。

1. 在原有script代码中新增computed配置项：

import json1 from './components/json1.json'
import json2 from './components/json2.json'
import json3 from './components/json3.json'

export default {
  data() {
    return {
      JSONFile1: json1,
      JSONFile2: json2,
      JSONFile3: json3,
    }
  },
  props: ["Rank"],
  // 新增计算属性
  computed: {
    currentJSON() {
      // 动态拼接属性名取值，额外加容错避免Rank非法时报错
      return this[`JSONFile${this.Rank}`] || []
    }
  }
}

2. 模板部分直接引用计算属性即可：

<div v-for="(item, index) in currentJSON" :key="index">

方案2：模板内直接动态取值（轻量化场景适用） #

如果不想新增计算属性，也可以直接在模板中通过实例的$data属性动态取值：

<div v-for="(item, index) in $data[`JSONFile${Rank}`]" :key="index">

该方案写法简洁但不利于后续扩展复杂逻辑，仅适合简单匹配场景使用。

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