如何在 vue.js 應用程序中訪問外部 json 文件對象

Question

如何在vue.js應用程序中訪問JSON對象我是新手

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

JSON文件已加載，現在我必須訪問其中的對象

Answer 1

只需將導入分配給數據屬性

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

然后使用v-for遍歷模板中的myJson屬性

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

筆記

如果您要導入的對象是靜態的，即不會更改，那么將其分配給數據屬性將毫無意義，因為它不需要是響應式的。

Vue 將data選項中的所有屬性轉換為 getter/setter 以使屬性具有反應性。 因此，vue 為不會改變的數據設置 getter/setter 是不必要的和開銷。 請參閱深入反應性。

因此，您可以按如下方式創建自定義選項：

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

然后使用$options遍歷模板中的自定義選項：

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

Answer 2

如果您的文件如下所示：

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

你可以做：

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

Answer 3

打字稿項目（我在 SFC vue 組件中有打字稿），需要將resolveJsonModule編譯器選項設置為true 。

在 tsconfig.json 中：

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

快樂編碼:)

（來源https://www.typescriptlang.org/docs/handbook/compiler-options.html ）

Answer 4

我最近開始使用 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 模板中加載 schema、schema1 數據。 例如，請參見下面的代碼：

      <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 對象的數據。

我希望這個答案對某人有所幫助。 如果有任何問題，我可以提供幫助。