[解決済み] vue.jsアプリで外部jsonファイルオブジェクトにアクセスする方法
2023-04-07 16:24:45
質問
アクセス方法 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>
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] Node.jsのプログラムにコマンドライン引数を渡すにはどうしたらいいですか?
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] オブジェクトをメンバーとして、プレーンなJavaScriptオブジェクトをループさせる方法
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] Javascriptで動的に命名されたメソッドを呼び出すにはどうすればよいですか?
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法