He importado varios archivos json con diferentes datos.
Según mi entrada en mi parent.vue, quiero recorrer diferentes archivos json.
<div v-for="(item, index) in <!-- JSONFile + Rank -->" :key="index">mi script para esto:
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 ] }Solo para su comprensión, manualmente se ve así:
<div v-for="(item, index) in JSONFile1" :key="index">O
<div v-for="(item, index) in JSONFile2" :key="index">La primera línea de código anterior debe representar si el valor de los accesorios es 1, la segunda línea de código si es 2.
Puede crear una matriz JSONFiles en lugar de 3 variables diferentes:
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 ] } Luego puede acceder a ellos mediante JSONFiles[Rank] :
<div v-for="(item, index) in JSONFiles[Rank]" :key="index">