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

質問

アクセス方法 JSON オブジェクトにアクセスする方法です。 vue.js アプリ 私はこの中で新しいです

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>

注意

インポートしたいオブジェクトが静的なもの、つまり変化しないものである場合、データプロパティにそれを代入しても、反応する必要がないため意味がありません。

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>