使用 props 值连接 v-for 循环中的源数据

Question

我导入了多个 json 个不同数据的文件。

根据我在 parent.vue 中的输入，我想遍历不同的 json 文件。

<div v-for="(item, index) in <!-- JSONFile + Rank -->" :key="index">

我的脚本：

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" //1, 2 or 3, based on input in parent.vue 
  ]
}

仅供您理解 - 手动看起来像这样：

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

或

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

上面的第一行代码应该表示 props-value 是否为 1，第二行代码是否为 2。

Answer 1

您可以创建一个 JSONFiles 数组而不是 3 个不同的变量：

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

export default {
data() {
  return {
    JSONFiles: [json1, json2, json3]
  }
}

  props: [
    "Rank" //1, 2 or 3, based on input in parent.vue 
  ]
}

然后您可以通过 JSONFiles[Rank]:

访问它们

<div v-for="(item, index) in JSONFiles[Rank]" :key="index">

使用 props 值连接 v-for 循环中的源数据

Connect source data in v-for loop with props value

javascript

vue.js

vuejs2

bootstrap-vue

vue-props