Connect source data in v-for loop with props value

Question

I have imported multiple json files with different data.

Based on my input in my parent.vue I want to loop through different json files.

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

my script for this:

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 
  ]
}

Just for your understanding - manually it looks like this:

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

OR

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

First code-line above should represent if props-value is 1, second code-line if it is 2.

Nima Ebrazeh · Accepted Answer · 2021-10-01 11:27:56Z

2

You can create a JSONFiles array instead of 3 different variables:

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 
  ]
}

Then you can access them by JSONFiles[Rank]:

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

answered Oct 1, 2021 at 11:27

Nima Ebrazeh

1,3266 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

B0BBY Over a year ago

exactly what I needed! Thank You so much !

Collectives™ on Stack Overflow

Connect source data in v-for loop with props value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related