web-dev-qa-db-fra.com

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

Comment accéder à JSON objets 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

javascriptvue.jsvuejs2
38
Haroon Aslam

Assignez simplement l'importation à une propriété de données

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

puis parcourez la propriété myJson de 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, c'est-à-dire qu'il ne change pas, son affectation à une propriété de données n'aura aucun sens car il n'a pas besoin d'être réactif.

Vue convertit toutes les propriétés de l'option data en accesseurs/générateurs pour que les propriétés soient réactives. Il serait donc inutile et inutile pour vue de configurer des getters/setters pour des données qui ne vont pas changer. Voir Réactivité en 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>
_

parcourez ensuite 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>
_
60
Vamsi Krishna

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); });
6
smarber