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
javascript
vue.js
vuejs2
Haroon Aslam
quelle
quelle
Antworten:
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
myJson
Eigenschaft 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
data
Option 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>
quelle
$options
Ansatz, den ichcreated()
für nicht reaktive Daten verwendet hatte - das ist besserWenn 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); });
quelle
Typoskript-Projekte (ich habe Typoskript in SFC-Vue-Komponenten) müssen die
resolveJsonModule
Compiler-Option auf setzentrue
.In tsconfig.json:
{ "compilerOptions": { ... "resolveJsonModule": true, ... }, ... }
Viel Spaß beim Codieren :)
(Quelle https://www.typescriptlang.org/docs/handbook/compiler-options.html )
quelle
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.
quelle