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

Posted 2023-02-16

【中文标题】用 props 值连接 v-for 循环中的源数据

【英文标题】：Connect source data in v-for loop with props value

【发布时间】：2021-11-23 00:57:21

【问题描述】：

我已经导入了多个不同数据的 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。

【参考方案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">

【讨论】：

正是我需要的！非常感谢！