web-dev-qa-db-ja.com

vue.jsアプリで外部jsonファイルオブジェクトにアクセスする方法

JSONvue.jsアプリのオブジェクトにアクセスする方法

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

jSONファイルがロードされ、その中のオブジェクトにアクセスする必要があります

javascriptvue.jsvuejs2
38
Haroon Aslam

インポートをデータプロパティに割り当てるだけです

<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>

NOTE

インポートするオブジェクトが静的である場合、つまり変更されない場合、それをデータプロパティに割り当てることは、リアクティブである必要がないため意味がありません。

Vueは、dataオプションのすべてのプロパティを、プロパティがリアクティブになるようにゲッター/セッターに変換します。そのため、vueが変更されないデータのゲッター/セッターをセットアップすることは不要であり、オーバーヘッドになります。 反応性の深さ を参照してください。

そのため、次のようにカスタムオプションを作成できます。

<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>
60
Vamsi Krishna

ファイルが次のように見える場合：

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

できるよ：

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