vue.js 앱에서 외부 json 파일 개체에 액세스하는 방법

vue.js 앱에서 외부 json 파일 개체에 액세스하는 방법

vue.js 앱에서 JSON 개체에 액세스하는 방법 이 앱은 처음입니다.

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

JSON 파일이 로드되어 그 안에 있는 오브젝트에 액세스해야 합니다.

가져오기를 데이터 속성에 할당하기만 하면 됩니다.

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

그 후 를 루프합니다.myJson템플릿 속성 사용v-for

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

메모

Import할 객체가 정적인 경우(즉, 변경되지 않는 경우), 데이터 속성에 할당하는 것은 무효가 되기 때문에 의미가 없습니다.

Vue는 의 모든 속성을 변환합니다.datagetters/setters 옵션을 사용하여 속성을 비활성화합니다.따라서 vue가 변경되지 않는 데이터에 대해 getter/setter를 설정하는 것은 불필요하고 오버헤드가 발생합니다.자세한 내용은 반응성을 참조하십시오.

따라서 다음과 같이 사용자 정의 옵션을 생성할 수 있습니다.

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

다음 명령을 사용하여 템플릿의 커스텀옵션을 루프합니다.

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

파일이 다음과 같은 경우:

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

다음 작업을 수행할 수 있습니다.

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

타이프스크립트 프로젝트(SFC vue 컴포넌트에 타이프스크립트가 있음)를 설정해야 합니다.resolveJsonModule컴파일러 옵션true.

tsconfig.json의 경우:

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

해피 코딩 :)

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

저는 최근에 Vue JS, JSON Schema를 사용한 프로젝트를 시작했습니다.Vue 앱의 JSON 스키마 파일에서 중첩된 JSON 개체에 액세스하려고 합니다.아래 코드를 시도했더니 이제 다른 Vue 템플릿 태그에 다른 JSON 개체를 로드할 수 있습니다.스크립트 태그에 다음 코드를 추가합니다.

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

이제 내보내기 기본 파트의 데이터 섹션에서 다음과 같이 JsonObject1,2 이름에 액세스할 수 있습니다.

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

이제 필요에 따라 Vue 템플릿 내에 스키마, 스키마1 데이터를 로드할 수 있습니다.예를 들어 다음 코드를 참조하십시오.

      <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은 @formSchema/native 라이브러리의 로컬 변수 이름입니다.다른 CSS 탭의 폼을 통해 다른 JSON 객체의 데이터를 구현했습니다.

이 대답이 누군가에게 도움이 되었으면 좋겠어요.질문이 있으시면 제가 도와드리겠습니다.

언급URL : https://stackoverflow.com/questions/45565349/how-to-access-external-json-file-objects-in-vue-js-app