Comment accéder aux objets de fichier json externes dans l'application vue.js

Question

Comment accéder aux objets JSON dans l'application vue.js? Je suis nouveau dans ce domaine.

 import json from './json/data.json'
 

le fichier JSON est chargé et maintenant je dois accéder aux objets qu'il contient

Answer 1

Seulement affecter l'importation de données de la propriété

<script>
      import json from './json/data.json'
      export default{
          data(){
              return{
                  myJson: json
              }
          }
      }
</script>

ensuite une boucle à travers l' myJson propriété dans votre modèle à l'aide de v-for

<template>
    <div>
        <div v-for="data in myJson">{{data}}</div>
    </div>
</template>

NOTE

Si l'objet que vous souhaitez importer est statique je.e ne change pas, en l'affectant à une propriété de données n'aurait aucun sens car elle n'a pas besoin d'être réactif.

Vue convertit toutes les propriétés dans l' data option de getters/setters pour les propriétés à être réactif. Il serait donc inutile et les frais généraux pour vue de l'installation des getters/setters pour les données qui ne va pas changer. Voir la Réactivité dans la profondeur.

Ainsi, vous pouvez créer une option personnalisée comme suit:

<script>
          import MY_JSON from './json/data.json'
          export default{
              //custom option named myJson
                 myJson: MY_JSON
          }
    </script>

puis la boucle par le biais de l'option personnalisée de votre modèle à l'aide de $options:

<template>
        <div>
            <div v-for="data in $options.myJson">{{data}}</div>
        </div>
    </template>

Answer 2

Si votre fichier ressemble à ceci:

 [
    {
        "firstname": "toto",
        "lastname": "titi"
    },
    {
        "firstname": "toto2",
        "lastname": "titi2"
    },
]
 

Tu peux faire:

 import json from './json/data.json';
// ....
json.forEach(x => { console.log(x.firstname, x.lastname); });