Zugriff auf externe JSON-Dateiobjekte in der vue.js-App

Wie man in der vue.js App auf JSON- Objekte zugreift Ich bin neu in diesem Bereich

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

Die JSON-Datei wird geladen und jetzt muss ich auf die darin enthaltenen Objekte zugreifen

Weisen Sie den Import einfach einer Dateneigenschaft zu

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

Durchlaufen Sie dann die myJsonEigenschaft in Ihrer Vorlage mitv-for

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

HINWEIS

Wenn das zu importierende Objekt statisch ist, sich also nicht ändert, ist die Zuweisung zu einer Dateneigenschaft nicht sinnvoll, da es nicht reaktiv sein muss.

Vue konvertiert alle Eigenschaften in der dataOption in Getter / Setter, damit die Eigenschaften reaktiv sind. Es wäre also unnötig und aufwendig, Getter / Setter für Daten einzurichten, die sich nicht ändern werden. Siehe Reaktivität im Detail .

So können Sie eine benutzerdefinierte Option wie folgt erstellen:

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

Durchlaufen Sie dann die benutzerdefinierte Option in Ihrer Vorlage mit $options:

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

Wenn Ihre Datei so aussieht:

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

Du kannst tun:

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

Typoskript-Projekte (ich habe Typoskript in SFC-Vue-Komponenten) müssen die resolveJsonModuleCompiler-Option auf setzen true.

In tsconfig.json:

{
  "compilerOptions": {
    ...
    "resolveJsonModule": true,
    ...
  },
  ...
}

Viel Spaß beim Codieren :)

(Quelle https://www.typescriptlang.org/docs/handbook/compiler-options.html )

Ich habe kürzlich begonnen, an einem Projekt mit Vue JS, JSON Schema zu arbeiten. Ich versuche, über eine JSON-Schemadatei in der Vue-App auf verschachtelte JSON-Objekte zuzugreifen. Ich habe den folgenden Code ausprobiert und kann jetzt verschiedene JSON-Objekte in verschiedene Vue-Vorlagen-Tags laden. Fügen Sie im Skript-Tag den folgenden Code hinzu

import  {JsonObject1name, JsonObject2name} from 'your Json file path';

Jetzt können Sie wie folgt auf die JsonObject1,2-Namen im Datenabschnitt des Export-Standardteils zugreifen:

data: () => ({ 
  
  schema: JsonObject1name,
  schema1: JsonObject2name,   
  
  model: {} 
}),

Jetzt können Sie die Daten des Schemas schema1 gemäß Ihren Anforderungen in die Vue-Vorlage laden. Siehe folgenden Code zum Beispiel:

      <SchemaForm id="unique name representing your Json object1" class="form"  v-model="model" :schema="schema" :components="components">
      </SchemaForm>  

      <SchemaForm id="unique name representing your Json object2" class="form" v-model="model" :schema="schema1" :components="components">
      </SchemaForm>

SchemaForm ist der lokale Variablenname für die @ formSchema / native Bibliothek. Ich habe die Daten verschiedener JSON-Objekte über Formulare in verschiedenen CSS-Registerkarten implementiert.

Ich hoffe diese Antwort hilft jemandem. Ich kann helfen, wenn es irgendwelche Fragen gibt.