I have brought in several JSON files containing different sets of data.
For my parent.vue input, I aim to iterate through these JSON files dynamically.
<div v-for="(item, index) in <!-- JSONFile + Rank -->" :key="index">
This is my setup:
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, determined by input in parent.vue
]
}
To illustrate, manually it would be like so:
<div v-for="(item, index) in JSONFile1" :key="index">
OR
<div v-for="(item, index) in JSONFile2" :key="index">
The first code line reflects the value of props being 1, while the second line corresponds to a value of 2.